图表.js圆环图保持灰色 - 无颜色

Question

我有一个由图表创建的圆环图.js如下所示：

        <div id="chartContainer" style="height: 320px; width: 320px">
            <canvas id="hoursFEContainer"></canvas>
        </div>

我需要图表.js如下(从 npm 下载(：-

require('chart.js');    

然后在相关函数中，我实例化了图表.js如下所示：

var distinctFeeEarners = ['MEH', 'IHM'];
var totalHoursByFE = [0.8, 0.7];
        var chartdata = {
                        labels: distinctFeeEarners,
                        datasets : [
                            {
                                label: 'Fee Earner',
                                data: totalHoursByFE
                            }
                        ]
                    };
                    var ctx = $("#hoursFEContainer");
                    var donutChart = new Chart(ctx, {
                        type: 'doughnut',
                        backgroundColor:
                        ['rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)'],                     
                        data: chartdata
                    });

图表显示正确的数据，但甜甜圈没有任何颜色？

怎么了？

编辑：除了愚蠢之外，背景颜色需要在数据集中而不是在新图表中。没关系。

Answer 1

原因是您在错误的位置定义了backgroundColor。它是一个数据集属性，因此需要在dataset中定义。

var distinctFeeEarners = ['MEH', 'IHM'];
var totalHoursByFE = [0.8, 0.7];
var chartdata = {
  labels: distinctFeeEarners,
  datasets: [{
    label: 'Fee Earner',
    data: totalHoursByFE,
    backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)']
  }]
};
var donutChart = new Chart(document.getElementById('hoursFEContainer'), {
  type: 'doughnut',
  data: chartdata
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div id="chartContainer" style="height: 320px; width: 320px">
  <canvas id="hoursFEContainer"></canvas>
</div>

Answer 2

ng2-charts有完全相同的问题

对我来说，不是预先初始化数据集。以前我会声明空数组

public data: MultiDataSet = [];

然后在后端请求解析后，我将分配新值

const dataset: Array<number> = new Array();
response.items.map(result => {
    dataset.push(result);
  });
this.data =  [dataset];

这将打印甜甜圈图，但没有颜色。一切都是灰色的。简单地不像这样预初始化多数据集就可以解决问题

public data: MultiDataSet; //=[];

Answer 3

在图表选项中将强制覆盖选项设置为 true，如下所示。(如果你使用的是 React(

<Doughnut
    data={data}
    options={{
      plugins: {
        colors: {
          forceOverride: true,
        },
        legend: {
          position: "right",
        },
      },
    }}
  />