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

Question

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

Answer 1

您可以为每个柱创建一个单独的 dataset，并按如下方式定义点格式的 data：

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

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

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

每次 dataset 的 hidden 状态发生变化时，都需要以编程方式收集和定义第二个 x 轴上的 labels。这可以通过 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, 99, 132)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'B',
        data: [{ x: 2, y: 22 }],
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        borderColor: 'rgb(255, 159, 64)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'C',
        data: [{ x: 3, y: 18 }],
        backgroundColor: 'rgba(255, 205, 86, 0.2)',
        borderColor: 'rgb(255, 205, 86)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'D',
        data: [{ x: 4, y: 13 }],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'E',
        data: [{ x: 5, y: 5 }],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'F',
        data: [{ x: 6, y: 16 }],
        backgroundColor: 'rgba(153, 102, 255, 0.2)',
        borderColor: 'rgb(153, 102, 255)',
        borderWidth: 1,
        categoryPercentage: 1
      },
    ]
  },
  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>

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

Chart.js manipulate each bar in chart with different labels

chart.js

chart.js2

chart.js3