ChartJS.更改轴线颜色

Question

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

谢谢

Answer 1

@A Friend 的好问题和好答案

他的答案与...... v2.xx完美配合chart.js

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

（因为v3.xx不向后兼容v2.xx）
使用v3.xxborderColor代替zeroLineColor更改图表轴的颜色：Chart.js

  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>

Answer 2

我知道这个问题是在 2 年前提出的，OP 已经标记了正确答案，但是我有一个解决方法来解决 OP 在标记答案的评论中提到的问题，我想解决它以保存其他人们一段时间。

但这会改变轴和所有网格线的颜色，如果我只想改变轴颜色怎么办？例如，我想要轴线纯黑色和网格线灰色。

如果您正在尝试实现这一目标，那么标记的答案不会为您做到，但以下内容应该：

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

Answer 3

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

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

Answer 4

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

请参阅所有属性的链接。在实施之前研究所有属性。

快乐编码！