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

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

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

 

HTML -контейнер объявляется просто:

дополнительно объявляется кнопка которая запускает перерисовку:

 

Серверная часть генерирует данные и выдает структуру JSON которую принимает компонент chart. Структура состоит из labels и datasets. В labels передается массив надписей по оси Х, в datasets передается массив массивов данных. То есть первые элементы из массивов данных будут соответствовать первому столбцу диаграммы.

 

Скрипт для обновления диаграммы состоит из серверного урл, jQuery селектора для контейнера, и параметров диаграммы (столбчатая, линейная итд).

Теперь, по нажатию кнопки RELOAD, из сервера придут новые сгенерированные данные и отобразятся на диаграмме.

 

 

as.chart.js

as.chart.js

 

Добавить комментарий

Ваш e-mail не будет опубликован.