图表多轴，当数据集被激活/停用时，使刻度显示/消失
图表多轴，当数据集被激活/停用时，使刻度显示/消失
提问于 2019-01-22 21:07:11
我使用的是charts.js。
这是我的图表：
我在同一张图中有3个或更多的数据集，每个数据集都有不同的比例，让我们想象一下所有的比例都在左边。
默认情况下，当停用数据集时(例如，在本例中单击"Sold Products")，比例也会在-1，+1之间重新缩放为here on multi-axis demo code。
当数据集被停用时，有没有方法可以使该数据集的比例消失？例如，在这种情况下，如果我停用“售出产品”，我想让中间的比例消失。当我重新激活“售出产品”时，我希望刻度重新出现。
Stack Overflow用户
发布于 2020-05-17 23:59:10
这可以使用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)
}],请看下面的可运行代码片段，看看它是如何工作的。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54308996
复制相关文章
相似问题
腾讯云开发者
