Плагин chart.js для создания графиков водопадов

Question

Я хочу создать плагин chart.js для создания диаграмм водопада.

Я новичок в работе с chart.js. Я думал расширить гистограмму, чтобы создать диаграмму водопада.

Функция рисования в контроллере гистограммы выглядит следующим образом:

draw: function(ease) {
            var me = this;
            var easingDecimal = ease || 1;
            helpers.each(me.getMeta().data, function(rectangle, index) {
                var d = me.getDataset().data[index];
                if (d !== null && d !== undefined && !isNaN(d)) {
                    rectangle.transition(easingDecimal).draw();
                }
            }, me);
        },

Полный файл js контроллера гистограммы можно найти здесь: https://github.com/chartjs/Chart.js/tree/master/src/controllers

Answer 1

Начиная с Chart.js v2.9.0., мы можем использовать плавающие полосы для простого создания диаграмм водопада. Отдельные столбцы могут быть указаны с помощью синтаксиса[min, max].

Учитывая массив значений [3, 5, 4, 2, 6], нам нужно получить следующие данные (последняя запись - это вычисленное значение для полосы "Итого"):

[[0, 3], [3, 8], [8, 12], [12, 14], [14, 20], 20]

Единственное, что осталось сделать, это определить tooltips.callback функция, которая вычисляет правильное значение, которое будет отображаться во всплывающих подсказках.

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      const v = data.datasets[0].data[tooltipItem.index];
      return Array.isArray(v) ? v[1] - v[0] : v;
    }
  }
},

Взгляните на следующий пример кода, который создает диаграмму водопада из baseData массив.

let baseData = [
 { label: 'A', value: 3 }, 
 { label: 'B', value: 5 }, 
 { label: 'C', value: 4 },
 { label: 'D', value: 2 }, 
 { label: 'E', value: 6 }
];

const labels = baseData.map(o => o.label).concat('Total');
const data = [];
let total = 0;
for (let i = 0; i < baseData.length; i++) {
  const vStart = total;
  total += baseData[i].value;
  data.push([vStart, total]);  
}
data.push(total);
const backgroundColors = data.map((o, i) => 'rgba(255, 99, 132, ' + (i + (11 - data.length)) * 0.1 + ')');

new Chart('waterfall', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: backgroundColors,
      barPercentage: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          const v = data.datasets[0].data[tooltipItem.index];
          return Array.isArray(v) ? v[1] - v[0] : v;
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="waterfall" height="200"></canvas>

Если диаграмма должна начинаться с полосы "Итого", просто reverse labels, data а также backgroundColors массивы следующим образом.

data: {
  labels: labels.reverse(),
  datasets: [{
    data: data.reverse(),
    backgroundColor: backgroundColors.reverse(),
    ...

Answer 2

Я создал плагин chartjs для графиков водопадов.

Смотрите https://github.com/MartinDawson/chartjs-plugin-waterfall

Этот плагин работает, проверяя, содержит ли какой-либо из ваших наборов данных свойство dummyStack со значением true. Свойство стека должно использоваться вместе с dummyStack для правильной работы этого плагина. Если dummyStack имеет значение true, тогда он скрывает метку, всплывающую подсказку и устанавливает цвет невидимым. Когда вы используете стекирование с этим, это создает эффект плавающей полосы, как показано на рисунке выше, которую мы можем использовать для диаграмм водопадов, так как chartjs-2 не поддерживает диаграммы водопадов по умолчанию.

import waterFallPlugin from 'chartjs-plugin-waterfall';

var chart = new Chart(ctx, {
    plugins: [waterFallPlugin]
});

const data = {
  datasets: [
    {
      label: 'Closing Costs',
      data: [50],
      backgroundColor: '#e8cdd7',
      stack: 'stack 1',
    },
    {
      label: 'Purchase Price',
      data: [700],
      backgroundColor: '#d29baf',
      stack: 'stack 1',
    },
    {
      data: [200],
      dummyStack: true,
      stack: 'stack 2',
    },
    {
      label: 'Opening Loan Balance',
      data: [550],
      backgroundColor: '#bb6987',
      stack: 'stack 2',
    },
    {
      label: 'Initial Cash Investment',
      data: [200],
      backgroundColor: '#a53860',
      stack: 'stack 3',
    },
  ],
};

У этого также есть линейные шаги от бара до бара.

Answer 3

Вы можете использовать плагин, рекомендованный Chart.JS https://github.com/everestate/chartjs-plugin-waterfall (см. https://www.chartjs.org/docs/2.7.2/notes/extensions.html)

Установка

npm install --save chartjs-plugin-waterfall

Применение

import waterFallPlugin from 'chartjs-plugin-waterfall';

var chart = new Chart(ctx, {
    plugins: [waterFallPlugin]
});