Javascript 更改标签上线条的颜色Chart.js

我试图改变Y轴和X轴上线条的颜色和厚度。 我不知道我在文档中寻找什么，但现在已经在代码中将它们命名为line

这条线叫什么？我应该给它起什么名字才能工作

我想保留红色标记内的线，但删除网格。

HTML

编辑：

对于希望更改生成的图形线（而不是网格线）的用户：

---

line

选项用于线型图，类似于

doughnut

类型等等。我相信你已经明白了，对吧

在我的代码中快速查看显示了选项

datasetStrokeWidth

，您可以将其用于厚度

颜色选项可在样式选项的

strokeColor

下找到

由于chart.js结合了数据和样式选项，您的选项将如下所示：

var lineChartData = {
    line: {
        datasets: [
            {
                strokeColor: '#15bedb'                            
            }
        ]
    }
};

var lineChartStyle = {
    line: {
        datasetStrokeWidth: 1
    }
};

var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: lineChartStyle
});

---

要更改线条的颜色和厚度（沿x轴和y轴），请分别为两个轴的网格线设置

颜色
和
线宽属性，如下所示：

scales: {
   xAxes: [{
      gridLines: {
         display: false,
         color: 'green',
         lineWidth: 3
      },
      ...
   }],
   yAxes: [{
      gridLines: {
         display: false,
         color: '#07C',
         lineWidth: 3
      },
      ...
   }]
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩


var randomScalingFactor=function（）{
返回Math.round（Math.random（）*100）
};
变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
labelColor:“#fff”，
fontColor:“#fff”，
背景颜色：“rgba（2200,0.2）”，
边框颜色：“rgba（220220,1）”，
pointBackgroundColor:'rgba（2201,1）'，
pointBorderColor:“#fff”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
}]
}
变量选项={
回答：是的，
MaintaintAspectRatio:false，
图例：{
fontColor:“白色”，
},
比例：{
xAxes：[{
网格线：{
显示：假，
颜色：“绿色”，
线宽：3
},
滴答声：{
fontColor:“白色”，
},
}],
雅克斯：[{
对,，
网格线：{
显示：假，
颜色：'#07C'，
线宽：3
},
滴答声：{
fontColor:“白色”，
贝吉纳泽罗：是的，
}
}]
}
};
var ctx=document.getElementById（'canvas-1'）；
var图表=新图表（ctx{
键入：“行”，
数据：线形图表数据，
选项：选项
});
canvas{background:#222}

谢谢您的回答！我想我可能不清楚我在说什么。我指的是标签上的线条。我在上面加了一张图片，上面写着：）是的，没问题。我留下我的答案只是为了保持差异，因为这也可能会让其他人感到困惑。我相信你的回答是正确的@ℊ我在回答中使用的语法来自3.x。如果不适用，请随意否决，我将删除我的答案。啊，OP是在谈论网格线吗。。。蒂姆·费尔马伦是：P
var lineChartData = {
    line: {
        datasets: [
            {
                strokeColor: '#15bedb'                            
            }
        ]
    }
};

var lineChartStyle = {
    line: {
        datasetStrokeWidth: 1
    }
};

var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: lineChartStyle
});

scales: {
   xAxes: [{
      gridLines: {
         display: false,
         color: 'green',
         lineWidth: 3
      },
      ...
   }],
   yAxes: [{
      gridLines: {
         display: false,
         color: '#07C',
         lineWidth: 3
      },
      ...
   }]
}