gpt4 book ai didi

javascript - 在 chartjs 中,点在顶部和底部的边缘被减半

转载 作者:行者123 更新时间:2023-12-05 02:37:39 24 4
gpt4 key购买 nike

enter image description here

如图所示,点在到达底部或顶部边缘时被切成两半(在此示例中数据为 1 或 5 时)。

我尝试填充,添加一些“假”数据以扩展 1 和 5 的限制,并使用滴答上的回调函数将其删除。没有一个按预期工作

这是我对此图表的配置。

const config = {
type: 'line' as ChartType,
data: data,
options: {
pointStyle: 'circle',
//pointBackgroundColor: 'white',
scales: {
y: {
ticks: {
maxTicksLimit: 5,
stepSize: 1,
},
min: 1,
max: 5,
reverse: true,
},
},
},
};

删除最小值和最大值,得到预期的输出。 enter image description here

但我需要最小值和最大值,因为我想要固定的 Y 轴值

有什么解决办法吗?

最佳答案

您可以使用 afterDataLimits Hook 来设置比例的最大值和最小值,这样它仍然会溢出图表区域:

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 10, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink',
radius: 10
}]
},
options: {
scales: {
y: {
afterDataLimits: (scale) => {
scale.max = 10;
scale.min = 0;
}
},
},
},
});
<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>

关于javascript - 在 chartjs 中,点在顶部和底部的边缘被减半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69904902/

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