Question

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

由于

Answer 1

您可以在图表选项下按比例配置更改颜色：

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

Answer 2

我知道这个问题是在2年前提出的，并且OP已经标记了正确的答案，但是我有一个解决方案，可以解决OP在标记的答案的注释中提到的问题，我想解决此问题以节省其他人的时间。

但是这会更改轴和所有gridLines的颜色，如果我只想更改轴的颜色？例如，我想要轴实线为黑色，网格线为灰色。

如果您要实现这一目标，那么标记的答案将不会为您解决，但以下内容应做到：

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

Answer 3

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

有关所有属性，请参考link。在实施之前研究所有属性。

编码愉快！

Answer 4

@A 朋友的好问题和好答案

他的回答非常适合....... chart.js v2.xx

现在为那些感兴趣的人提供 3.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>

ChartJS。更改轴线颜色

4 个答案:

现在为那些感兴趣的人提供 3.xx 版本：