При визуализации данных столбчатые диаграммы — популярный способ представления и сравнения нескольких категорий или рядов на одной полосе. Однако часто бывает полезно отображать общее значение каждого столбца в дополнение к отдельным сегментам. В этой статье блога мы рассмотрим несколько методов отображения итоговых значений на гистограммах с накоплением с помощью Chart.js, мощной библиотеки JavaScript для создания интерактивных диаграмм и графиков.

Метод 1: использование плагина Chart.js (метка общего количества столбцов)

Chart.js позволяет расширять его функциональность с помощью плагинов. Одним из таких плагинов является плагин «Метка общей суммы столбцов», который позволяет отображать общее значение на каждом столбце.

Пример кода:

// Include the stacked bar total label plugin
Chart.plugins.register({
  afterDatasetsDraw: function(chart) {
    var ctx = chart.ctx;
    chart.data.datasets.forEach(function(dataset, datasetIndex) {
      var meta = chart.getDatasetMeta(datasetIndex);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          // Get the total value
          var total = dataset.data.reduce(function(acc, value) {
            return acc + value;
          }, 0);
          if (dataset.data[index] > 0) {
            // Display the total value on the stacked bar
            ctx.fillStyle = '#000';
            var fontSize = 12;
            var fontStyle = 'normal';
            var fontFamily = 'Helvetica Neue';
            ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
            ctx.textBaseline = 'middle';
            var padding = 4;
            var position = element.tooltipPosition();
            ctx.fillText(total, position.x, position.y - (fontSize / 2) - padding);
          }
        });
      }
    });
  }
});

Метод 2: расчет итогов и настройка подсказки

Другой подход — рассчитать итоговые значения вручную и настроить всплывающую подсказку для отображения итогового значения.

Пример кода:

// Calculate totals and customize tooltip
Chart.plugins.register({
  beforeRender: function(chart) {
    chart.data.datasets.forEach(function(dataset) {
      var total = dataset.data.reduce(function(acc, value) {
        return acc + value;
      }, 0);
      dataset.total = total;
    });
  },
  afterDraw: function(chart) {
    var ctx = chart.ctx;
    chart.data.datasets.forEach(function(dataset, datasetIndex) {
      var meta = chart.getDatasetMeta(datasetIndex);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          var position = element.tooltipPosition();
          var tooltip = dataset.total;
          ctx.fillStyle = '#000';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText(tooltip, position.x, position.y - 20);
        });
      }
    });
  }
});

Метод 3: использование плагина аннотаций Chart.js

Плагин аннотаций Chart.js позволяет добавлять к диаграммам собственные аннотации, например метки. Вы можете использовать этот плагин для отображения общего значения на гистограммах с накоплением.

Пример кода:

// Include the Chart.js annotation plugin
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.0"></script>
// Add annotations to display the total value
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    annotation: {
      annotations: [{
        type: 'text',
        x: 'center',
        y: 'center',
        fontColor: '#000',
        fontSize: 12,
        fontStyle: 'normal',
        fontFamily: 'Helvetica Neue',
        value: 'Total: ' + total,
      }],
    },
  },
});

В этой статье мы рассмотрели различные методы отображения общего значения на гистограммах с накоплением с помощью Chart.js. Мы обсудили использование таких плагинов, как «метка итоговой суммы столбцов» и плагин аннотаций Chart.js, а также расчет итогов вручную и настройку всплывающих подсказок. Применяя эти методы, вы можете повысить эффективность составных гистограмм и предоставить пользователям дополнительную информацию о ваших данных.

Не забудьте выбрать метод, который лучше всего соответствует вашим конкретным требованиям, и интегрировать его в свою реализацию Chart.js для улучшения визуализации.