我有一个有两个Y轴的图表，一个在左边，一个在右边。两个都有一个设置的最小值、最大值和stepSize，所以它们正好有11个刻度线。右边的Y轴似乎像预期的那样荣誉所有内容，但左边的Y轴不支持stepSize。
左手Y轴从3800到4140，这意味着如果我需要11个刻度，我应该步进34，我已经设置好了，但它实际上从3800开始，以8刻度一次，然后以34刻度继续，直到4114，最后以26刻度到达4140。我该如何停止呢？
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<div>
<table style="border-collapse: collapse; width: 1050px; padding-top: 10px; height: 1050px" border="0">
<canvas id="myChart2" style="width:100%;max-width:700px"></canvas>
<script>
var dates = ['07/29/2022', '08/01/2022', '08/02/2022', '08/03/2022', '08/04/2022', '08/05/2022', '08/06/2022', '08/07/2022', '08/08/2022', '08/09/2022', '08/10/2022', '08/11/2022'];
var portfolio_values = [3869.73, 3802.77, 3811.14, 3813.0, 3818.58, 3954.36, 3954.36, 3954.36, 3993.42, 3983.19, 4131.99, 4086.42];
var sp500_values = [378.79, 377.65, 375.21, 381.07, 380.77, 379.98, 379.98, 379.98, 379.64, 378.14, 386.06, 386.43];
new Chart("myChart2", {
type: "line",
data: {
labels: dates,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
yAxisID: "A",
label: "Twitter",
data: portfolio_values
},
{
fill: false,
lineTension: 0,
backgroundColor: "rgba(255,0,0,1.0)",
borderColor: "rgba(255,0,0,0.1)",
yAxisID: "B",
label: "S&P500",
data: sp500_values
}
]
},
options: {
title: {
display: true,
text: "Twitter vs S&P500"
},
legend: {
display: true
},
scales: {
yAxes: [{
id: "A",
type: "linear",
position: "left",
ticks: {
min: 3800,
max: 4140,
stepSize: 34.0
}
},
{
id: "B",
type: "linear",
position: "right",
ticks: {
min: 370,
max: 390,
stepSize: 2.0
}
}
]
}
}
});
</script>
</table>
</div>
</body>
</html>
1条答案
按热度按时间lmyy7pcs1#
您可以尝试强制使用分笔成交点实现轴回调：
第一个