gpt4 book ai didi

angular - 如何使用chart.js动态设置轴上的刻度?

转载 作者:行者123 更新时间:2023-12-03 23:15:24 24 4
gpt4 key购买 nike

我们的值在加载站点时可能会有所不同,并且我们希望动态设置刻度步长。我们在同一个图表中有两个具有不同单位的数据集,并且希望水平网格线相互匹配。一方面,它是 0-100% 的比例,以 20 为步长。另一方面,我们希望最大值为 10 的倍数,并将步长设置为最大值的 1/5(因此网格线应相互匹配)。但是 stepsize 除非 fix 输入为“10”(见 id: 'B')或类似的不会被加载。我们尝试使用类变量动态设置它,但没有用。我们使用 Angular5 和 ng2-charts 库

public averageOptions: any = {
legend: {
labels: {
fontColor: 'rgb(255,255,255)',
fontSize: 15
}
},
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
min: 0,
max: 100,
stepSize: 20,
fontColor: 'rgb(255,255,255)',
fontSize: 15,
callback: function (value) {
return value + '%';
}
},
gridLines: {
zeroLineColor: 'rgb(255,255,255)',
color: 'rgb(255,255,255)'
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
min: this.totalVotesMin,
max: this.totalVotesMax,
fontColor: 'rgb(255,255,255)',
fontSize: 15,
stepSize: 10
},
gridLines: {
zeroLineColor: 'rgb(255,255,255)',
color: 'rgb(255,255,255)'
}
}],
xAxes: [{
ticks: {
fontColor: 'rgb(255,255,255)',
fontSize: 15
},
gridLines: {
zeroLineColor: 'rgb(255,255,255)',
color: 'rgb(255,255,255)'
}
}]
}
};

我们发现了这个有点相关的主题,但我们不知道刻度数组的外观或如何设置它,因为没有关于它的文档:
Chart.js - Setting max Y axis value and keeping steps correct

最佳答案

看起来很长,但您可以使用以下代码根据输入数据更改步长和最大值。

ticks: {
min: 0,
callback: function(value, index, values) {
if (Math.floor(value) === value) {
return value;
}
}
}

关于angular - 如何使用chart.js动态设置轴上的刻度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51947689/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com