Chart Js多轴，在激活/停用数据集时使刻度出现/消失

Question

我正在使用charts.js。

这是我的图表：

我在同一个图表中有 3 个或更多数据集，每个数据集都有不同的比例，让我们想象一下所有比例都在左边。

默认情况下，停用数据集时（例如在本例中单击“已售产品”），比例也会在 [-1, +1] 之间重新调整为 here on multi-axis demo code。

当数据集被停用时，有没有一种方法可以使数据集的比例消失？ 例如在这种情况下，如果我停用“已售产品”，我想让中间的刻度消失。 当我重新激活“已售产品”时，我希望秤重新出现。

Answer 1

这可以使用Plugin Core API 来完成。 API 提供了一系列可用于执行自定义代码的钩子。

您可以使用beforeLayout 挂钩，如下所示。该函数遍历数据集并设置yAxes.display 选项，具体取决于相应的数据集是否隐藏。

plugins: [{
  beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],

请查看以下可运行代码 sn-p 以了解其工作原理。

new Chart('chart', {
  type: 'line',
  plugins: [{
    beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
  }],
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
        label: 'Dataset 1',
        yAxisID: 'yAxis-1',
        data: [100, 96, 84, 76, 69],
        borderColor: 'red',
        fill: false
      },
      {
        label: 'Dataset 2',
        yAxisID: 'yAxis-2',
        data: [9, 6, 8, 7, 6],
        borderColor: 'blue',
        fill: false
      },
      {
        label: 'Dataset 3',
        yAxisID: 'yAxis-3',
        data: [0.3, 0.5, 0.8, 0.4, 0.5],
        borderColor: 'green',
        fill: false
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
          id: 'yAxis-1',
          type: 'linear',
          position: 'left',
        },
        {
          id: 'yAxis-2',
          type: 'linear',
          position: 'left'
        },
        {
          id: 'yAxis-3',
          type: 'linear',
          position: 'left'
        }
      ]
    }
  }
});

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