chart.js

Что такое chart.js? chart.js — это библиотека для построения диаграмм и графиков

 

Линейные диаграммы полезны, когда вы хотите показать изменение значения данной переменной относительно изменений какой-либо другой переменной. Другая переменная — обычно временная. Например, линейные диаграммы могут использоваться для отображения скорости транспортного средства в определенные промежутки времени.

Chart.js позволяет создавать линейные диаграммы, если задать type как line. Вот пример:

1
2
3
4
5
var lineChart = new Chart(speedCanvas, {
    type: 'line',
    data: speedData,
    options: chartOptions
});

Теперь мы предоставим данные, а также параметры конфигурации, которые нам нужны для построения линейной диаграммы.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
  }]
};
var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

Как как мы не предоставили цвета для линейной диаграммы, будут использоваться цвет по умолчанию rgba(0,0,0,0.1).

Рассмотрим опции, специально предназначенных для изменения линейных диаграмм. Все параметры и данные, которые мы предоставили выше, создают следующую диаграмму.

Цвет области под кривой определяется ключом backgroundColor. Все линейные диаграммы, построенные с использованием этого метода, будут заполнены данным цветом. Вы можете установить значение ключа fill (заливка) равным false, если вы хотите просто нарисовать линию, без заполнения области по дней каким-либо цветом.

Еще одна вещь, которую вы могли заметить, это то, что для построения диаграммы мы используем отдельные указатели данных (точки). Библиотека автоматически интерполирует значения всех остальных точек с помощью встроенных алгоритмов.

По умолчанию точки строятся с использованием пользовательской взвешенной кубической интерполяции. Однако, вы можете установить значение ключа cubicInterpolationMode в monotone для более точного построения точек, если график, который вы создаете, определяется уравнением y = f (x). Упругость кривой Безье определяется ключом lineTension. Вы можете установить его значение равным нулю, чтобы нарисовались прямые линии. Обратите внимание, что этот ключ игнорируется, если уже указано значение cubicInterpolationMode.

Вы также можете задать значения цвета границы и её ширины с помощью ключей borderColor и borderWidth. Если вы хотите построить диаграмму, используя пунктирную линию вместо сплошной линии, вы можете использовать ключ borderDash. Он принимает массив в качестве значений, элементы которого определяют длину и промежуток штрихов соответственно.

Появление построенных точек можно контролировать с помощью свойств pointBorderColorpointBackgroundColorpointBorderWidthpointRadius и pointHoverRadius. Существует также ключ pointHitRadius, который определяет расстояние, с которого, точки на графике, начнут взаимодействовать с мышью.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
    lineTension: 0,
    fill: false,
    borderColor: 'orange',
    backgroundColor: 'transparent',
    borderDash: [5, 5],
    pointBorderColor: 'orange',
    pointBackgroundColor: 'rgba(255,150,0,0.5)',
    pointRadius: 5,
    pointHoverRadius: 10,
    pointHitRadius: 30,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
  }]
};

Указанный выше объект speedData отображает те же точки данных, что и предыдущий график, но с другими значениями, установленными для всех свойств.

Также вы можете построить несколько линий на одном графике и задать различные параметры, чтобы нарисовать каждый из них следующим образом:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var dataFirst = {
  label: "Car A - Speed (mph)",
  data: [0, 59, 75, 20, 20, 55, 40],
  lineTension: 0.3,
  // Set More Options
};
  
var dataSecond = {
  label: "Car B - Speed (mph)",
  data: [20, 15, 60, 60, 65, 30, 70],
  // Set More Options
};
  
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
};
var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData
});

Столбчатые диаграммы (или гистограммы) полезны, когда вы хотите сравнить одно измерение для разных объектов — например, количество автомобилей, продаваемых разными компаниями, или количество людей определенной возрастной группы в городе. Вы можете создать столбчатые диаграммы в Chart.js, установив ключ type в bar. По умолчанию это создаст диаграммы с вертикальными столбцами. Если вы хотите создать диаграммы с горизонтальными столбцами, вы должны установить type как horizontalBar.

1
2
3
4
5
var barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: densityData,
    options: chartOptions
});

Давайте создадим гистограмму, которая отображает плотность всех планет в нашей солнечной системе. Данные о плотности были взяты из Списка информации о Планетах, предоставленного NASA.

01
02
03
04
05
06
07
08
09
10
11
12
var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};
var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData]
  }
});

Параметры, приведенные выше, создадут следующую диаграмму:

Так же как в линейных диаграммах, полосы заполнены светло-серым цветом. Вы можете изменить цвет полос, используя ключ backgroundColor. Аналогично, цвет и ширина границ разных полос могут быть заданы с помощью ключей borderColor и borderWidth.

Если вы хотите, чтобы библиотека не рисовала границы для определенной стороны, вы можете указать сторону в качестве значения для ключа borderSkipped. Вы можете установить следующие значение: topleftbottom или right. Также вы можете изменить границы и цвет фона различных полос, которые вы увидите при наведении на них курсора мыши, с помощью hoverBorderColor и hoverBackgroundColor.

Размер столбцов в столбчатой диаграммы выше был вычислен автоматически. Однако вы можете контролировать ширину отдельных столбцов, используя свойства barThickness и barPercentage. Ключ barThickness используется для настройки толщины столбцов в пикселях, а barPercentageиспользуется для настройки толщины в процентах от доступной ширины группы.

Также вы можете показать или скрыть конкретную ось, используя для неё ключ display. При установке значения display в false будет скрыта эта конкретная ось. Вы можете узнать подробнее обо всех этих опциях на странице документации.

Давайте сделаем график плотности (планет) более интересным, переопределим значения по умолчанию для гистограмм, используя следующий код.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: [
    'rgba(0, 99, 132, 0.6)',
    'rgba(30, 99, 132, 0.6)',
    'rgba(60, 99, 132, 0.6)',
    'rgba(90, 99, 132, 0.6)',
    'rgba(120, 99, 132, 0.6)',
    'rgba(150, 99, 132, 0.6)',
    'rgba(180, 99, 132, 0.6)',
    'rgba(210, 99, 132, 0.6)',
    'rgba(240, 99, 132, 0.6)'
  ],
  borderColor: [
    'rgba(0, 99, 132, 1)',
    'rgba(30, 99, 132, 1)',
    'rgba(60, 99, 132, 1)',
    'rgba(90, 99, 132, 1)',
    'rgba(120, 99, 132, 1)',
    'rgba(150, 99, 132, 1)',
    'rgba(180, 99, 132, 1)',
    'rgba(210, 99, 132, 1)',
    'rgba(240, 99, 132, 1)'
  ],
  borderWidth: 2,
  hoverBorderWidth: 0
};
var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};
var barChart = new Chart(densityCanvas, {
  type: 'horizontalBar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData],
  },
  options: chartOptions
});

Объект densityData используется для установки границ и фонового цвета столбцов. В приведенном выше коде стоит обратить внимание на две вещи. Во-первых, значения свойств barPercentage и borderSkipped были установлены внутри объекта chartOptions вместо объекта dataDensity.

Во-вторых, на этот раз type диаграммы установлен в значение horizontalBar. Что также означает, что вам придется изменить значение barThickness и barPercentage для оси Y вместо оси X, чтобы эти значения имели хоть какой-либо эффект на столбцах.

Приведенные выше параметры создадут следующую гистограмму.

Вы также можете сделать графики из несколько наборов данных на одной и той же диаграмме, присвоив id (идентификатор) определенной оси конкретному набору данных. Ключ xAxisIDиспользуется для присвоения id любой оси X вашего набора данных. Аналогично, ключ yAxisIDиспользуется для присвоения идентификатора любой оси вашего набора данных. Обе оси также имеют ключ id, который вы можете использовать для назначения им уникальных идентификаторов.

Если последний абзац был немного запутанным, следующий пример поможет прояснить ситуацию.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var densityData = {
  label: 'Density of Planet (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: 'rgba(0, 99, 132, 0.6)',
  borderColor: 'rgba(0, 99, 132, 1)',
  yAxisID: "y-axis-density"
};
var gravityData = {
  label: 'Gravity of Planet (m/s2)',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  yAxisID: "y-axis-gravity"
};
var planetData = {
  labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};
var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis-density"
    }, {
      id: "y-axis-gravity"
    }]
  }
};
var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});

Здесь мы создали две оси Y с уникальными идентификаторами и они были назначены на отдельные наборы данных, используя ключ yAxisID. Ключи barPercentage и categoryPercentageиспользуются, чтобы сгруппировать столбцы для отдельных планет. Настраиваем categoryPercentage на более низкое значение, чтобы увеличить расстояние между столбцами разных планет. Аналогичным образом, установив barPercentage на более высокое значение, мы уменьшим расстояние между столбцами одной и той же планеты.

Один комментарий

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *