使用 Chart.js 2.8.0 版绘制基本折线图。观察最右边的数据点被截断。但是最左边的数据点(第一个数据点)看起来完好无损。
我通过更改 pointRadius 的值更改了数据点圆圈的大小。但即使是最小值,数据点仍然会被切断。
我没有使用任何插件或花哨的设置。我正在用浅灰色背景色填充图表。但除此之外,其他一切都是标准的 Chart.js。
我在这里重新创建了这个问题:https : //codepen.io/LeoU/pen/gVLybO
这是我的选项设置。
options: {
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return "£" + parseInt(tooltipValue).toLocaleString();
}
}
},
scales: {
yAxes: [{
gridLines: {
color: "white",
lineWidth: 2
},
ticks: {
beginAtZero: true,
min: 0,
stepSize: 500000,
callback: function(value, index, values) {
return "£" + value.toLocaleString();
},
},
scaleLabel: {
display: true,
labelString: "Median house price"
}
}],
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
},
有没有人在 Chart.js 上看到过类似的问题?
我通过在图表padding
的right
手边增加值来解决这个问题。我玩弄了确切的数字,4 看起来很适合我的图表。但我想正确的数字将取决于您pointRadius
和您拥有的其他变量的大小。这就是我看到的变化。
options: {
layout: {
padding: {
left: 0,
right: 4,
top: 0,
bottom: 0
}
}
}
有关 Chart.js 填充的更多信息,这是他们的说明页面。https://www.chartjs.org/docs/latest/configuration/layout.html
这很烦人。而且,这应该是默认设置,真的。但这为我解决了问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句