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); 
     }, 

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

Answer 1

Я создал chartjs плагин для каскадных диаграмм.

https://github.com/MartinDawson/chartjs-plugin-waterfall См

Этот плагин работает, проверяя, если любой из ваших наборов данных содержат свойство dummyStack, который устанавливается истина. Свойство стека должно использоваться вместе с dummyStack для правильной работы этого плагина. Если dummyStack истинно, то он скрывает ярлык, всплывающую подсказку и устанавливает цвет невидимым. Когда вы используете стекирование с этим, он создает эффект плавающей полосы, как показано на изображении выше, что мы можем использовать для карт водопада, поскольку 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', 
    }, 
    ], 
}; 

Он также шаги строки из бара в бар.