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

Question

我正在使用charts.js.

这是我的图表：

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

默认情况下，停用数据集时（例如在这种情况下单击“已售产品”），比例会在 [-1, +1] 之间重新缩放，就像这里在多轴演示代码中一样。

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

Answer 1

这可以使用插件核心 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)
}],

请查看以下可运行的代码片段，了解它是如何工作的。

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>