Столбчатая диаграмма Chart.js

Столбчатая диаграмма — это статистическая диаграмма, в которой длина прямоугольников используется как переменная.

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

Свойствоtypeстолбчатой диаграммы — этоbar, type описывает тип диаграммы.

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

Далее мы создаём простую столбчатую диаграмму:

Пример

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March','Апрель', 'Май', 'Июнь', 'Июль'];  // Установите соответствующие метки на оси X
const data = {
  labels: labels,
  datasets: [{
    label: 'Моя первая столбчатая диаграмма',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [      // Установить цвет фона каждого столбца
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [     // Установить цвет линии границы каждого столбца
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1     // Установить ширину линии
  }]
};
const config = {
  type: 'bar', // Установить тип диаграммы
  data: data,  // Установить набор данных
  options: {
    scales: {
      y: {
        beginAtZero: true // Установить начало оси Y с 0
      }
    }
  },
};
const myChart = new Chart(ctx, config);

Попробуйте »

Результат вывода приведённого выше примера:

Горизонтальная столбчатая диаграмма

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

Чтобы настроить горизонтальную столбчатую диаграмму, необходимо задать свойство indexAxis в объекте options равнымy, значение по умолчанию свойства indexAxis —x。

Пример

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March','Апрель', 'Май', 'Июнь', 'Июль'];  // Установите соответствующие метки на оси X
const data = {
  labels: labels,
  datasets: [{
    axis: 'y',
    label: 'Моя первая столбчатая диаграмма',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    backgroundColor: [      // Установить цвет фона каждого столбца
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [     // Установить цвет линии границы каждого столбца
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1     // Установить ширину линии
  }]
};
const config = {
  type: 'bar', // Установить тип диаграммы
  data: data,  // Установить набор данных
  options: {
    indexAxis: 'y',
  }
};
const myChart = new Chart(ctx, config);

Попробуйте »

Результат вывода приведённого выше примера:

Другие расширения