Chartjs-标签颜色不匹配

Question

我为标签分配了三种不同的颜色，但是颜色点始终显示为蓝色，绿色和黄色。我敢肯定我做错了什么。

我编写的代码是：

var pieSimpleChart = {
  chart: {
    height: 350,
    type: 'pie',
  },
  legend: {
    position: 'bottom'
  },
  labels: ["IT", "Product Development", "Sales"],
  series: [2, 2, 6],
  fill: {
    colors: ["#447b40", "#cc7870", "#e74ce4"]
  }
}

var chart = new ApexCharts(document.querySelector("#task-pie-chart"), pieSimpleChart);
chart.render();

如何使标签与所选颜色匹配？

Answer 1

使用backgroundColor代替fill: colors。

此外，您应该使用dataset对象传递值：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["IT", "Product Development", "Sales"],
        datasets: [{
            backgroundColor: [
                "#ff0000",
                "#00ff00",
                "#0000ff"
            ],
            data: [2, 2, 6]
        }]
    },
    options: {
        legend: {
            position: 'bottom'
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

Answer 2

我通过删除“填充”选项来修复它。现在代码看起来像：

    var pieSimpleChart = 
    {
        chart: 
        {
            height: 350,
            type: 'pie',
        },
        legend: 
        {
            position: 'bottom'
        },
        labels: ["IT", "Product Development", "Sales"],
        series: [2, 2, 6],
        colors: ["#447b40", "#cc7870", "#e74ce4"]
    }