Chart.js 用不同的标签操作图表中的每个条形

问题描述

有谁知道这是否可能？基本上我希望图表有标签，例如 [Jan、Feb、march]，并且我希望能够打开和关闭这些值。看起来很简单的事情，但事实证明是有问题的。

解决方法

您可以为每个条形创建单独的 dataset 并以点格式定义 data，如下所示：

data: [{ x: 1,y: 16 }]

此外，您需要定义将包含标签的第二个 x 轴。

{
  offset: true,gridLines: {
    display: false
  }
}

每次 labels 的 hidden 状态发生变化时，都需要以编程方式收集和定义第二个 x 轴上的 dataset。这可以通过 Plugin Core API 完成。 API 提供了可用于执行自定义代码的不同钩子。在您的情况下，您可以使用 beforeLayout 钩子。

plugins: [{
  beforeLayout: chart => chart.chart.options.scales.xAxes[1].labels = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).map(ds => ds.label)
}]

请看下面的可运行代码，看看它是如何工作的。

new Chart(document.getElementById('chart'),{
  type: 'bar',plugins: [{
    beforeLayout: chart => chart.chart.options.scales.xAxes[1].labels = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).map(ds => ds.label)
  }],data: {
    datasets: [{
        label: 'A',data: [{ x: 1,y: 16 }],backgroundColor: 'rgba(255,99,132,0.2)',borderColor: 'rgb(255,132)',borderWidth: 1,categoryPercentage: 1
      },{
        label: 'B',data: [{ x: 2,y: 22 }],159,64,64)',{
        label: 'C',data: [{ x: 3,y: 18 }],205,86,86)',{
        label: 'D',data: [{ x: 4,y: 13 }],backgroundColor: 'rgba(75,192,borderColor: 'rgb(75,192)',{
        label: 'E',data: [{ x: 5,y: 5 }],backgroundColor: 'rgba(54,162,235,borderColor: 'rgb(54,235)',{
        label: 'F',data: [{ x: 6,backgroundColor: 'rgba(153,102,255,borderColor: 'rgb(153,255)',]
  },options: {
    tooltips: {
      callbacks: {
        title: () => undefined
      }
    },scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],xAxes: [{
          display: false
        },{
          offset: true,gridLines: {
            display: false
          }
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="chart" height="80"></canvas>