Chartsjs多轴，启用/禁用数据集时显示/消失比例 [英] Chartsjs multi-axis, make the scale appear/disappear when the dataset is activated/deactivated

问题描述

我正在使用 charts.js .

这是我的图表:

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

默认情况下，停用数据集时(例如，在这种情况下，单击销售产品")，比例会在[-1，+1]之间重新调整为

解决方案

可以使用

 新图表(图表"，{类型:行"，插件:[{beforeLayout:图表=>chart.data.datasets.forEach((ds，i)=> chart.config.options.scales.yAxes [i] .display =！ds._meta [0] .hidden)}]，数据: {标签:['A'，'B'，'C'，'D'，'E']，数据集:[{标签:数据集1"，yAxisID:"yAxis-1"，数据:[100，96，84，76，69]，borderColor:'红色'，填写:假}，{标签:数据集2"，yAxisID:"yAxis-2"，数据:[9、6、8、7、6]，borderColor:'蓝色'，填写:假}，{标签:数据集3"，yAxisID:"yAxis-3"，数据:[0.3、0.5、0.8、0.4、0.5]，borderColor:绿色"，填写:假}]}，选项: {比例尺:{y轴:[{id:"yAxis-1"，类型:线性"，位置:左"，}，{id:"yAxis-2"，类型:线性"，位置:左"}，{id:"yAxis-3"，类型:线性"，位置:左"}]}}});  

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

I'm using charts.js.

This is my chart:

I have 3 or more datasets in the same chart, each with a different scale, let's image that all the scales are on the left.

As default when deactivating a dataset (for example in this case clicking on "Sold Products") the scale is rescaled between [-1, +1] as here on multi-axis demo code too.

Is there a way in which I can make disappear the dataset's scale when that dataset is deactivated? For example in this case if I deactivate "Sold Products", I would like to make the scale in the middle to disappear. When I reactivate the "Sold Product" then I would like the scale to reappear.

解决方案

This can be done using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.

You could use the beforeLayout hook as shown below. The function iterates over the datasets and sets the yAxes.display option depending whether the corresponding dataset is hidden or not.

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

Please have a look at the following runnable code snippet to see how it works.

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>

这篇关于Chartsjs多轴，启用/禁用数据集时显示/消失比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！