chart.js版本3:如何将网格线与步长对齐?

qlckcl4x  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(202)

预期值: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轴的垂线,如预期设计所示?

7ivaypg9

7ivaypg91#

若要使水平grid缐条与y标签对齐,请定义options.scales.y.grid.offset: false或省略选项。
对于从图表底部到各个数据点的垂直线,您可以使用插件核心API。例如,在afterDraw挂钩中,您可以使用CanvasRenderingContext2D直接在canvas上绘制这些线。
请看一看您修改后的可运行代码,看看它是如何工作的。
第一个

相关问题