Необычные, отзывчивые графики с Chart.js

Данные вокруг нас. В то время как поисковые системы и другие приложения работают наиболее оптимально с текстовым представлением данных, люди находят данные, представленные визуально, простыми для понимания. Ранее в этом году SitePoint опубликовал статью Аурелио, представляющую введение в Chart.js . В этом учебном пособии будет кратко рассказано о введении, а затем более подробно рассмотрены возможности Chart.js

Начиная

Chart.js — это гибкая и легкая библиотека для создания графиков на основе HTML5. Библиотека поддерживает шесть различных типов диаграмм, каждый из которых имеет множество параметров настройки. Если этого недостаточно, у вас также есть возможность создавать собственные типы диаграмм.

Все шесть основных типов диаграмм в Chart.js сведены на 11 КБ и имеют размер gzip’d, а библиотека является модульной, поэтому вы можете еще больше уменьшить размер запроса для файла, включив только тот тип диаграммы, который вам действительно нужен. Ниже ссылка cdnjs, чтобы включить это:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Доступные параметры конфигурации

Chart.js позволяет вам изменять практически все аспекты ваших диаграмм — от подсказок до анимации. В этом разделе я изменю несколько настроек, чтобы продемонстрировать, на что способен Chart.js. Вот HTML-код, с которого мы начнем:

 <canvas id="canvas"></canvas>

Для первой демонстрации я создам линейный график. Есть несколько основных опций, которые вам нужно установить, чтобы графики имели смысл. Линейный график ожидает массив labelsdatasets Метки появляются на оси X. Я заполнил линейный график некоторыми фиктивными данными. Данные разбиты на массив наборов данных. Каждый набор данных имеет цвет для заливки, линии и точек.

В этом случае я установил fillColor Если вы не установите значение fillColor То же самое относится и к другим ценностям. Цвета определяются в формате RGBA, RGB, hex или HSL, аналогично CSS.

 var lineData = {
  labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
           'Data 5', 'Data 6', 'Data 7'],
  datasets: [{
    fillColor: 'rgba(0,0,0,0)',
    strokeColor: 'rgba(220,180,0,1)',
    pointColor: 'rgba(220,180,0,1)',
    data: [20, 30, 80, 20, 40, 10, 60]
  }, {
    fillColor: 'rgba(0,0,0,0)',
    strokeColor: 'rgba(151,187,205,1)',
    pointColor: 'rgba(151,187,205,1)',
    data: [60, 10, 40, 30, 80, 30, 20]
  }]
}

Настройка глобальных параметров

Я включил код, который устанавливает некоторые глобальные значения. animationSteps Есть много других опций, которые вы можете изменить в соответствии с вашими потребностями, такие как scaleLineColorscaleIntegersOnly Я предлагаю вам просмотреть документацию Chart.js, чтобы узнать, что еще может предложить эта библиотека.

 Chart.defaults.global = {
  animationSteps : 50,
  tooltipYPadding : 16,
  tooltipCornerRadius : 0,
  tooltipTitleFontStyle : 'normal',
  tooltipFillColor : 'rgba(0,160,0,0.8)',
  animationEasing : 'easeOutBounce',
  scaleLineColor : 'black',
  scaleFontSize : 16
}

Настройка параметров, специфичных для диаграммы

Помимо глобальных параметров, для отдельных типов диаграмм доступны параметры конфигурации. Я опишу некоторые из этих параметров в этом графике, чтобы дать вам представление:

 var ctx = document.getElementById('canvas').getContext('2d');
var lineDemo = new Chart(ctx).Line(lineData, {
  responsive: true,
  pointDotRadius: 10,
  bezierCurve: false,
  scaleShowVerticalLines: false,
  scaleGridLineColor: 'black'
});

Графики, сгенерированные Chart.js, по умолчанию не реагируют. Настройка responsive Если вам нужно сделать каждый график отзывчивым, я рекомендую установить это глобально, например так:

 Chart.defaults.global.responsive = true;

Ниже вы можете увидеть демо линейного графика:

 var dData = function() {
  return Math.round(Math.random() * 90) + 10;
};

var barData = {
  labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
           'dD 5', 'dD 6', 'dD 7', 'dD 8'],
  datasets: [{
    fillColor: 'rgba(0,60,100,1)',
    strokeColor: 'black',
    data: [dData(), dData(), dData(), dData(),
           dData(), dData(), dData(), dData()]
  }]
}

 var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
  responsive: true
});

setInterval(function() {
  barDemo.removeData();
  barDemo.addData([dData()], 'dD ' + index);
  index++;
}, 3000);

 barDemo.datasets[0].bars[2].value = 60;
barDemo.update();