Любая система содержит большое количество данных. Зачастую, несет польза не сколько фактические цифры, сколько отношение между ними: разница или пропорция. Человек, читая обычные цифры, затрудняется извлечь из них эти полезные сведения. На помощь приходят диаграммы.

Компонент as.chart основан на http://www.chartjs.org/docs/#scales-linear-scale и возможностях as.js и as.sys.js. Реализация функционала, основанного на данном компоненте диаграмм, достаточно выполнить три вещи:

  1. Сделать html контейнер для диаграмм
  2. Написать серверную часть
  3. Написать скрипт обновления диаграммы

 

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

 

Руслан Раянов

Recent Posts

Что такое Customer Development (кастдев)? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

10 часов ago

Что такое Целевая аудитория? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

1 день ago

Что такое Концепция сайта? Что такое Бриф на разработку сайта? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

2 дня ago

Каким должен быть личный кабинет информационной системы?

Вероятно, у вас есть сайт и вы подумываете, что было бы неплохо внедрить в него…

3 дня ago

Что такое Итерация, этап, спринт? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

6 дней ago

Что такое Рейт эстимейт почасовая ставка? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

1 неделя ago