ChartJs x瀑布图上的x轴标签

Question

使用ChartJS是否可以强制图表为每个数据集显示X轴标签？下面是我尝试使用Chart 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/[email protected]/dist/chartjs-plugin-waterfall.min.js"></script>

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

Answer 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: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1,
      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>