Chartsjs多轴，当数据集被激活时，使比例尺出现disappear，deactivated。

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>