Любая система содержит большое количество данных. Зачастую, несет польза не сколько фактические цифры, сколько отношение между ними: разница или пропорция. Человек, читая обычные цифры, затрудняется извлечь из них эти полезные сведения. На помощь приходят диаграммы.
Компонент as.chart основан на http://www.chartjs.org/docs/#scales-linear-scale и возможностях as.js и as.sys.js. Реализация функционала, основанного на данном компоненте диаграмм, достаточно выполнить три вещи:
HTML -контейнер объявляется просто:
<canvas id="myChart" width="400" height="400"></canvas>
дополнительно объявляется кнопка которая запускает перерисовку:
<button class='chLoad'> RELOAD </button>
Серверная часть генерирует данные и выдает структуру JSON которую принимает компонент chart. Структура состоит из labels и datasets. В labels передается массив надписей по оси Х, в datasets передается массив массивов данных. То есть первые элементы из массивов данных будут соответствовать первому столбцу диаграммы.
public ActionResult GetBasicChart() { var random = new Random(); var i = 1; return Json(new { result = true, labels = items.Select(x => { return "#" + i++; }), datasets = new[] { new { backgroundColor = "rgba(0, 220, 0, 0.5)", label = "GetBasicChart", data = System.Linq.Enumerable.Range(1,15).Select(x => 310000 + random.Next(9999) * 10).ToArray() }, new{ backgroundColor = "rgba(220, 100, 0, 0.5)", label = "GetBasicChart-2", data = System.Linq.Enumerable.Range(1,15).Select(x => 280000 + random.Next(9999) * 10).ToArray() } } }, JsonRequestBehavior.AllowGet); }
Скрипт для обновления диаграммы состоит из серверного урл, jQuery селектора для контейнера, и параметров диаграммы (столбчатая, линейная итд).
$(".chLoad").click(function(e) { e.preventDefault(); as.chart.loadChart({ url: '@Url.Action("GetBasicChart", "Charts")', cont: $("#myChart"), chartParams: { type: 'bar' } }) });
Теперь, по нажатию кнопки RELOAD, из сервера придут новые сгенерированные данные и отобразятся на диаграмме.
as.chart.js
https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта
https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта
https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта
Вероятно, у вас есть сайт и вы подумываете, что было бы неплохо внедрить в него…
https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта
https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта