График Js метки оси x на диаграмме водопада - PullRequest
Новая
       68

График Js метки оси x на диаграмме водопада

0 голосов
/ 08 мая 2020

Используя диаграмму JS, можно ли заставить диаграмму отображать метки оси X для каждого набора данных? Ниже моя попытка воспроизвести диаграмму водопада с использованием библиотеки диаграмм js. Как видите, для каждой полосы в наборах данных нет меток. Можно ли их включить? 

 var ctx = document.getElementById("myChart").getContext('2d');
        const dat = {
            datasets: [
                {
                    label: 'Purchase Price',
                    data: [750],
                    backgroundColor: '#d29baf',
                    stack: 'stack 1',
                },
                {
                    data: [200],
                    waterfall: {
                        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',
                },
            ],
        };

        var chart = new Chart(ctx, {
            type:'bar',
            plugins: [chartjsPluginWaterfall],
            data: dat
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-waterfall@1.0.3/dist/chartjs-plugin-waterfall.min.js"></script>

<div>
<canvas id="myChart"></canvas>
</div>

1 Ответ

1 голос
/ 10 мая 2020

Вы можете избавиться от chart js -plugin-waterfall и использовать вместо него плавающие столбцы , где отдельные столбцы могут быть указаны с помощью синтаксиса [min, max]. Эта функция доступна начиная с Chart. js v2.9.0 .

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

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

Обратите внимание на приведенный ниже пример кода. 

new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['Purchase Prise', 'Opening Loan Blance', 'Initial Cash Investment'],
    datasets: [{
      data: [750, [200, 750], 200],
      backgroundColor: ['#d29baf', '#bb6987', '#a53860'],
      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
        }
      }]
    }
  }
});
canvas {
  max-width: 400px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>

Если вы предпочитаете общий подход c, проверьте мой ответ Я задал аналогичный вопрос .

...