我有一张图表,显示过去 7 天的网站调用情况。就是这样:
这是初始化:
varwebsitecalls_chart = new Chart(websitecalls_chartel, {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
min: 0,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
问题:
问题是,当数据为 0 时,图表会切割圆圈,因为我将 min 设置为 0。我必须将 min 设置为 0,因为负网站调用不能存在。如果我不设置它,将显示-1。有没有办法解决这个设计技术问题?
提前致谢,
菲利普。
最佳答案
不知道为什么,但定义 y.beginAtZero: true
而不是 y.min: 0
将解决问题。
请查看您修改后的可运行代码,看看它是如何工作的。
new Chart('websitecalls_chartel', {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>
beginAtZero
:如果true
,则如果尚未包含比例尺,则将包含 0。min
:用户定义的最小比例值,覆盖数据的最小值。
关于javascript - Chart.js 将数据点减少一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71882964/