如何在chart.js图形中独立于网格线线宽调整轴宽度?

如何在chart.js图形中独立于网格线线宽调整轴宽度?,chart.js,Chart.js,对于我的图表,我尝试使用细网格线和粗轴线(x和y) 我找到了一个调整zeroLineWidth的选项,但这仅适用于0,并且我的轴不从0开始(例如,x轴是年,因此从0开始没有意义)。 我找到了一些关于它的讨论,但据我所知,这还不起作用: 我还尝试为gridLines lineWidth选项提供一个数组。第一个值会更改轴的厚度,但也会更改第一条网格线的厚度。所以这不是完全独立的 scales: { yAxes: [{ gridLines: { lin

对于我的图表,我尝试使用细网格线和粗轴线(x和y)

我找到了一个调整zeroLineWidth的选项,但这仅适用于0,并且我的轴不从0开始(例如,x轴是年,因此从0开始没有意义)。 我找到了一些关于它的讨论,但据我所知,这还不起作用:

我还尝试为gridLines lineWidth选项提供一个数组。第一个值会更改轴的厚度,但也会更改第一条网格线的厚度。所以这不是完全独立的

scales: {
    yAxes: [{
        gridLines: { 
            lineWidth: [5,1,1,1,1,1,1,1,1]
        }
    }]
}

也许现在没有办法做到这一点,但如果有人有一个解决方案,那就太好了。即使是粗糙的也会受到欢迎。

看起来没有办法做到这一点,因为(正如您所注意到的)轴线宽度是通过以下方式直接从网格线宽度导出的:

但是,既然你说欢迎黑客解决方案

下面的代码片段演示如何组合两个轴以实现所需的效果;一个用于边界,一个用于网格线

它很难看,但很实用

let border_轴={
网格线:{
drawOnChartArea:错误,
线宽:10,
颜色:“rgba(255127,0,0.25)”
},
滴答声:{
贝吉纳泽罗:是的
}
},
网格线_轴={
beforeBuildTicks:函数(轴){
如果(轴id=“y轴-1”){
//此回调确保两个轴具有相同的最小/最大值,以保持刻度线和网格线对齐。
轴最大值=轴图表刻度[“y轴-0”]。最大值;
最小轴=最小轴图表刻度[“y轴-0”];
}
},
网格线:{
drawTicks:false,
抽边线:假
},
滴答声:{
显示:假
}
},
chart=新图表(document.getElementById(“图表”){
键入:“行”,
数据:{
标签:[2001、2002、2003、2004、2005],
数据集:[{
数据:[1,2,3,4,5]
}]
},
选项:{
比例:{
xAxes:[边界_轴,网格线_轴],
yAxes:[边界轴,网格线轴]
}
}
});

var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;