[英]ChartJS. Change axis line color
我想知道是否可以使用 ChartJS 更改图表轴的颜色。
谢谢
您可以通过图表选项下的比例配置更改颜色:
type: '...',
data: {...},
options: {
scales: {
xAxes: [{gridLines: { color: "#131c2b" }}],
yAxes: [{gridLines: { color: "#131c2b" }}]
}
}
我知道这个问题是在 2 年前提出的,OP 已经标记了正确答案,但是我有一个解决方法来解决 OP 在标记答案的评论中提到的问题,我想解决它以保存其他人们一段时间。
但这会改变轴和所有网格线的颜色,如果我只想改变轴颜色怎么办? 例如,我想要轴线纯黑色和网格线灰色。
如果您正在尝试实现这一目标,那么标记的答案不会为您做到,但以下内容应该:
yAxes: [{
gridLines: {
zeroLineColor: '#ffcc33'
}
}]
在 Charjs.JS 中,我们可以使用以下设置来设置比例标签和刻度的样式。
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'X axe name',
fontColor:'#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Y axe name',
fontColor: '#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}]
}
}
请参阅所有属性的链接。 在实施之前研究所有属性。
快乐编码!
来自@A Friend 的好问题和好答案
他的回答非常适合...... chart.js
v2.xx
(因为v3.xx不向后兼容v2.xx )
使用borderColor
而不是zeroLineColor
来使用Chart.js
v3.xx更改图表轴的颜色:
scales: {
x: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red' // <-- this line is answer to initial question
}
},
y: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green' // <-- this line is answer to initial question
}
}
}
遵循带有完整代码的工作片段:
const labels=["2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05"]; const data_1=[39,41,42,43,43]; const data_2=[37,38,40,41,39]; const ctx=document.querySelector('canvas').getContext('2d'); const data = { labels: labels, datasets: [{ label: 'Data 1', borderColor: 'grey', data: data_1 }, { label: 'Data 2', borderColor: 'grey', data: data_2 }] }; const options = { scales: { x: { grid: { color: 'rgba(255,0,0,0.1)', borderColor: 'red' } }, y: { grid: { color: 'rgba(0,255,0,0.1)', borderColor: 'green' } } } }; const chart = new Chart(ctx, { type: 'line', data: data, options: options });
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- gets you the latest version of Chart.js, now at v3.5.0 --> <canvas width="320" height="240"></canvas>
对于 2022 年更新的 ChartJs 3 你可以在初始化上下文时传递options
object。 在示例代码中,我使用x
更改 X 轴上的线条颜色,您也可以尝试使用y
。
options: { scales: { x: { grid: { color: '#777777' } } },
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.