更改 chart.js 中标签的颜色

Question

如何将标签上的颜色更改为 blue？是否可以通过单击按钮在颜色（比如蓝色和红色）之间切换？`

我之所以要求切换，是因为我可能会创建一个 light/dark 模式，然后根据此更改图表中的颜色可能会很好。但如果不可能，那么 blue 将是最好的。

    const data = {
        labels: [
            'New',
            'To Do',
            'In Progress',
            'Resolved'
        ],
        datasets: [{
            label: 'WDC',
            data: [300, 50, 100, 20],
            backgroundColor: [
                'rgb(126, 191, 241)',
                'rgb(255, 159, 64)',
                'rgb(255, 255, 0)',
                'rgb(160, 160, 160)'
            ],
            borderColor: [
                'rgb(126, 191, 241)',
                'rgb(255, 159, 64)',
                'rgb(255, 255, 0)',
                'rgb(160, 160, 160)'
            ],
            backgroundColor: [
                'rgb(126, 191, 241)',
                'rgb(255, 159, 64)',
                'rgb(255, 255, 0)',
                'rgb(160, 160, 160)'
            ],
            hoverOffset: 4
        }]
    };
    const config = {
        type: 'pie',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: 20
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    };
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas" style="position: relative; height:30vh; width:40vw">
    <canvas id="myChart" width="785" height="389" style="z-index: 8; display: block; box-sizing: border-box; height: 389px; width: 785px;"></canvas>
</div>

Answer 1

不确定您指的是图例中的标签还是工具提示中的标签，但这里是两者的选项：

const data = {
  labels: [
    'New',
    'To Do',
    'In Progress',
    'Resolved'
  ],
  datasets: [{
    label: 'WDC',
    data: [300, 50, 100, 20],
    backgroundColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    borderColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    backgroundColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    hoverOffset: 4
  }]
};
const config = {
  type: 'pie',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: 20
    },
    plugins: {
      tooltip: {
        bodyColor: 'blue'
      },
      legend: {
        labels: {
          color: 'blue',
        },
        position: 'top'
      }
    }
  }
};
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas">
  <canvas id="myChart"></canvas>
</div>

更改 chart.js 中标签的颜色

Change color on labels in chart.js

javascript

chart.js