Chart.js：如何更改 x 軸背景顏色？

Question

我正在使用 "chart.js": "3.0.0" 和 "react-chartjs-2": "^3.0.3" 我試圖改變 x 軸的背景顏色。 我可以改變字體的顏色，但不能改變背景

我試着用

 backgroundColor: 'red'

但不工作..

  const options = {
    scales: {
      x: {
        ticks: {
          font: {
            size: 10,
          },
          backgroundColor: 'red', // not working
          color: 'black',　　// worked
        },
      },
      y: {
        min: 0,
        max: 10,
        ticks: {
          stepSize: 2,
        },
      },
    },
  };

有人知道怎么改嗎？

Answer 1

您可以為此使用自定義內聯插件：

 var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'red' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], backgroundColor: 'blue' } ] }, options: { plugins: { scaleBackgroundColor: { color: 'yellow' } } }, plugins: [{ id: 'scaleBackgroundColor', beforeDraw: (chart, args, opts) => { const { ctx, canvas, chartArea: { left, bottom, width, } } = chart; ctx.beginPath(); ctx.rect(left, bottom, width, (canvas.height - bottom)); ctx.fillStyle = opts.color || 'white' ctx.fill(); } }] } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script> </body>

Chart.js：如何更改 x 軸背景顏色？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-07-12 12:21:39

Chart.js：如何更改 x 軸背景顏色？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-07-12 12:21:39

解決方案1
1 已采納 2021-07-12 12:21:39