瀑布图上的ChartJs x轴标签答案

【问题标题】：ChartJs x axis labels on waterfall chart瀑布图上的ChartJs x轴标签
【发布时间】：2020-05-10 16:09:35
【问题描述】：

使用 ChartJS 是否可以强制图表显示每个数据集的 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>

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

您可以摆脱 chartjs-plugin-waterfall 并使用 floating bars 代替可以使用语法 [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>

如果您更喜欢通用方法，请查看我的answer 我给了一个类似的问题。

【讨论】：