[英]ChartJS. Change axis line color
I wanna know if it's possible to change the color of the chart axis using ChartJS.我想知道是否可以使用 ChartJS 更改图表轴的颜色。
Thanks谢谢
you can change the color by scales configuration under chart options:您可以通过图表选项下的比例配置更改颜色:
type: '...',
data: {...},
options: {
scales: {
xAxes: [{gridLines: { color: "#131c2b" }}],
yAxes: [{gridLines: { color: "#131c2b" }}]
}
}
I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time.我知道这个问题是在 2 年前提出的,OP 已经标记了正确答案,但是我有一个解决方法来解决 OP 在标记答案的评论中提到的问题,我想解决它以保存其他人们一段时间。
But this changes the color of the axis and all the gridLines, what if I just want to change the axis color?但这会改变轴和所有网格线的颜色,如果我只想改变轴颜色怎么办? For example, I want the axis line solid black and the grid lines grey.例如,我想要轴线纯黑色和网格线灰色。
If you're trying to achieve this, then the marked answer won't do it for you but the following should:如果您正在尝试实现这一目标,那么标记的答案不会为您做到,但以下内容应该:
yAxes: [{
gridLines: {
zeroLineColor: '#ffcc33'
}
}]
In the Charjs.JS to style the scale label and ticks we can use below settings.在 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
}
}]
}
}
Please refer the link for all the properties.请参阅所有属性的链接。 Study all the property before implementation.在实施之前研究所有属性。
Happy coding !快乐编码!
Good question and good answer from @A Friend来自@A Friend 的好问题和好答案
His answer works perfectly well with ....... chart.js
v2.xx他的回答非常适合...... chart.js
v2.xx
(as v3.xx is not backwards compatible with v2.xx ) (因为v3.xx不向后兼容v2.xx )
Using borderColor
instead of zeroLineColor
to change the color of the chart axis using Chart.js
v3.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
}
}
}
Following a working snippet with complete code:遵循带有完整代码的工作片段:
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>
For ChartJs 3 updated in 2022 You can pass the options
object when initializing the context.对于 2022 年更新的 ChartJs 3 你可以在初始化上下文时传递options
object。 In the sample code I was use x
to change the line color on X Axis, you can try y
as well.在示例代码中,我使用x
更改 X 轴上的线条颜色,您也可以尝试使用y
。
options: { scales: { x: { grid: { color: '#777777' } } },
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.