圖表JS。 更改軸線顏色

Question

我想知道是否可以使用 ChartJS 更改圖表軸的顏色。

謝謝

Answer 1

您可以通過圖表選項下的比例配置更改顏色：

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

Answer 2

我知道這個問題是在 2 年前提出的，OP 已經標記了正確答案，但是我有一個解決方法來解決 OP 在標記答案的評論中提到的問題，我想解決它以保存其他人們一段時間。

但這會改變軸和所有網格線的顏色，如果我只想改變軸顏色怎么辦？ 例如，我想要軸線純黑色和網格線灰色。

如果您正在嘗試實現這一目標，那么標記的答案不會為您做到，但以下內容應該：

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

請參閱所有屬性的鏈接。 在實施之前研究所有屬性。

快樂編碼！

Answer 4

來自@A Friend 的好問題和好答案

他的回答非常適合...... 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>

Answer 5

對於 2022 年更新的 ChartJs 3 你可以在初始化上下文時傳遞options object。 在示例代碼中，我使用x更改 X 軸上的線條顏色，您也可以嘗試使用y 。

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