Vuejs 如何为 vue-chartjs Doughnut 添加颜色？答案

【问题标题】：Vuejs How can I add colors to vue-chartjs Doughnut?Vuejs 如何为 vue-chartjs Doughnut 添加颜色？
【发布时间】：2020-06-19 04:01:33
【问题描述】：

我正在尝试实现 vue-chartjs Donut，但我无法正确设置颜色。

这是我使用组件 Doughnut 的地方

我的 App.vue

<template>
  <div id="app">
    <label for="Doughnut">Doughnut</label>
    <div id="ChartDoughnut">
      <ChartDoughnut :chartData="chartDataDoughnut" />
    </div>
  </div>
</template>

<script>
import ChartDoughnut from "./components/ChartDoughnut.vue";
export default {
  name: "App",
  components: {
    ChartDoughnut
  },
  data() {
    return {
      chartDataDoughnut: {
        datasets: [
          {
            data: [10, 20, 30]
          }
        ],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: ["Red", "Yellow", "Blue"]
      }
      // optionsDoughnut: {}
    };
  }
};
</script>

这是 Doughnut 的组件

chartDoughnut.vue

<script>
import { Doughnut } from "vue-chartjs";

export default {
  extends: Doughnut,
  props: {
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted() {
    this.renderChart(this.chartData);
  }
};
</script>

我在标签上添加了颜色，但它不起作用。

【问题讨论】：

标签： vue.js vuejs2 vue-chartjs

【解决方案1】：

颜色是每个数据集的一部分。

chartDataDoughnut: {
  datasets: [
    {
      data: [10, 20, 30],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ]
    }
  ],
  labels: ["Foo", "Bar", "Lorem"]
}

【讨论】：

【解决方案2】：

尝试将带有颜色数组的 backgroundColor 属性添加到您的 datasets 属性中。

backgroundColor: ['red', 'yellow', 'blue']

// The important part: the Chart component
Vue.component('chart', {
   extends: VueChartJs.Doughnut,
  props: {
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted() {
    this.renderChart(this.chartData);
  }
})

//App setup
new Vue({
	el:'#vue',
  data(){
  	return {
        chartDataDoughnut: {
          datasets: [
            {
              data: [10, 20, 30],
              backgroundColor: ['red', 'yellow', 'blue']
            }
          ],
          labels: ["Red", "Yellow", "Blue"]
        }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

<div id="vue">
  <chart :chart-data="chartDataDoughnut"></chart>
</div>

【讨论】：