预期值:enter image description here
电流:enter image description here
我希望步长和网格线在同一行中,并有一些填充
我怎样才能用chart.js v3实现这一点呢
scales: {
y: {
stacked: true,
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: true,
borderDashOffset: 25,
borderColor: "#d1d2db",
borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
min: 0,
max: max,
ticks: {
// forces step size to be 25 units
stepSize: 25,
beginAtZero: true,
callback: callback,
max: max,
},
title: {
display: false,
text: "Y axis title",
},
},
x: {
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
tickLength: 0,
// borderDash: [0, 1],
// borderDashOffset: 0,
borderColor: "#d1d2db",
// borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
},
},
顺便说一句,是否也可以有从数据点到x轴的垂线,如预期设计所示?
1条答案
按热度按时间7ivaypg91#
若要使水平
grid
缐条与y标签对齐,请定义options.scales.y.grid.offset: false
或省略选项。对于从图表底部到各个数据点的垂直线,您可以使用插件核心API。例如,在
afterDraw
挂钩中,您可以使用CanvasRenderingContext2D
直接在canvas
上绘制这些线。请看一看您修改后的可运行代码,看看它是如何工作的。
第一个