javascript ChartJS.更改坐标轴线条颜色

j2cgzkjk  于 2023-01-19  发布在  Java
关注(0)|答案(5)|浏览(188)

我想知道是否可以使用ChartJS更改图表轴的颜色。
谢谢

tzxcd3kk

tzxcd3kk1#

我知道这个问题是2年前问的,OP已经标记了正确答案,但是我有一个解决方案,可以解决OP在标记答案的评论中提到的问题,我想解决它,以保存其他人的时间。
但是这会改变坐标轴和所有网格线的颜色,如果我只想改变坐标轴的颜色呢?例如,我希望坐标轴的颜色是黑色,网格线的颜色是灰色。
如果你想做到这一点,那么标记的答案不会为你做到这一点,但以下内容应该:

yAxes: [{
    gridLines: {
        zeroLineColor: '#ffcc33'
    }
}]
kqlmhetl

kqlmhetl2#

你可以通过图表选项下的比例配置更改颜色:

type: '...',
data: {...},
options: {
       scales: {
              xAxes: [{gridLines: { color: "#131c2b" }}],
              yAxes: [{gridLines: { color: "#131c2b" }}]
              }
    }
2g32fytz

2g32fytz3#

@一个朋友的好问题和好答案
他的答案与....... chart.jsv2.xx配合得非常好

现在为感兴趣的用户提供版本3.xx

(as* * v3.xxv2.xx**不向后兼容)
使用borderColor而不是zeroLineColor,通过Chart.jsv3.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
      }
    }
  }

以下是包含完整代码的工作代码段:
x一个一个一个一个x一个一个二个x

mnemlml8

mnemlml84#

在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
                            }
                        }]
                 }
         }

请参考所有属性的链接。在实施之前研究所有属性。
快乐编码!

5cg8jx4n

5cg8jx4n5#

对于2022年更新的ChartJs 3可以在初始化上下文时传递options对象。在示例代码中,我使用x来更改X轴上的线条颜色,您也可以尝试y

options: {
    scales: {
      x: {
        grid: {
          color: '#777777'
        }
      }
    },

相关问题