解决Chart.js环形图使用props时背景色缺失问题

问题：使用Chart.js实现环形图，通过props传递数据适配不同API返回内容，但图表仅显示分段轮廓，缺少背景色。

问题原因 #

Chart.js不会自动为环形图的分段生成背景色，必须在datasets中显式配置backgroundColor数组，每个元素对应一个分段的颜色。

解决方案 #

有两种实现方式，可根据需求选择：

方式1：组件内置颜色数组（快速修复）

在DoughnutChart组件的datasets中添加预设的颜色数组，适合颜色固定的场景：

修改后的DoughnutChart组件代码：

<!-- DoughnutChart -->
<template>
    <div>
      <canvas id="myChart" width="80%" height="80%"></canvas>
      <p>Here is my chart <h1>{{ topLabel }}</h1></p>
    </div>
  </template>
  
  <script>
  import { Chart, ArcElement, DoughnutController } from 'chart.js';
  Chart.register(DoughnutController, ArcElement);
  
  export default {
    name: "doughnut-chart",
    props: {
      ValuesLabel: {
        type: Array,
        required: true,
        default: ["value1", "value2", "value3", "value4", "value5"]
      },
      topLabel: {
        type: String,
        required: true,
        default: "Here is my chart"
      },
      dataChart: {
        type: Array,
        required: true,
        default: [10, 20, 30, 40, 50]
      }
    },
    mounted() {
      console.log("My doughnut chart is mounted");
      const ctx = document.getElementById('myChart').getContext('2d');
      // 预设背景色数组，数量与数据分段一致
      const bgColors = [
        '#FF6384',
        '#36A2EB',
        '#FFCE56',
        '#4BC0C0',
        '#9966FF'
      ];
      const myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: this.ValuesLabel,
          datasets: [
            {
              label: this.topLabel,
              data: this.dataChart,
              backgroundColor: bgColors // 添加背景色配置
            }
          ]
        }
      });
      return myChart;
    }
  };
  </script>

方式2：通过props传递颜色（灵活适配API场景）

如果需要从API获取颜色或父组件自定义颜色，可将backgroundColor设为props，进一步提升组件复用性：

1. 修改DoughnutChart组件，新增bgColors props：

<!-- DoughnutChart -->
<template>
    <div>
      <canvas id="myChart" width="80%" height="80%"></canvas>
      <p>Here is my chart <h1>{{ topLabel }}</h1></p>
    </div>
  </template>
  
  <script>
  import { Chart, ArcElement, DoughnutController } from 'chart.js';
  Chart.register(DoughnutController, ArcElement);
  
  export default {
    name: "doughnut-chart",
    props: {
      ValuesLabel: {
        type: Array,
        required: true,
        default: ["value1", "value2", "value3", "value4", "value5"]
      },
      topLabel: {
        type: String,
        required: true,
        default: "Here is my chart"
      },
      dataChart: {
        type: Array,
        required: true,
        default: [10, 20, 30, 40, 50]
      },
      bgColors: { // 新增颜色props
        type: Array,
        required: false,
        default: () => [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#4BC0C0',
          '#9966FF'
        ]
      }
    },
    mounted() {
      console.log("My doughnut chart is mounted");
      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: this.ValuesLabel,
          datasets: [
            {
              label: this.topLabel,
              data: this.dataChart,
              backgroundColor: this.bgColors // 使用props传递的颜色
            }
          ]
        }
      });
      return myChart;
    }
  };
  </script>

2. 在父组件myBudgetView中传递自定义颜色（可选，不传递则使用组件默认值）：

<!-- myBudgetView -->
<template>
    <div>
      <h1>My Budget</h1>
      <doughnut-chart
        :ValuesLabel="labels"
        :topLabel="topLabel"
        :dataChart="dataChart"
        :bgColors="customColors" <!-- 传递自定义颜色 -->
      />
    </div>
  </template>
  
  <script>
  import DoughnutChart from "../components/Charts/DoughnutChart.vue";
  
  export default {
    components: {
      DoughnutChart
    },
    name: "myBudgetView",
  
    data() {
      return {
        labels: ['fruits', 'veggies', 'meat', 'dairy', 'snacks'],
        topLabel: "My expenses",
        dataChart: [12, 20, 33, 40, 51],
        customColors: ['#FF9F40', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'] // 自定义颜色数组
      };
    }
  };
  </script>

效果说明 #

修改后，环形图的每个分段会显示对应的背景色，符合预期效果。

内容的提问来源于stack exchange，提问作者KarljoY973