Apexcharts -标签颜色不匹配

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

我通过删除"fill“选项修复了这个问题。现在代码看起来像这样：

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

Answer 2

使用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>

​