Chart.js 圆环图保持灰色 - 没有颜色

Posted 2023-03-14

【中文标题】Chart.js 圆环图保持灰色 - 没有颜色

【英文标题】：Chart.js donut chart remains grey - no color

【发布时间】：2017-08-13 19:50:08

【问题描述】：

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

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

我需要chart.js如下（从npm下载）：-

require('chart.js');    

然后在相关函数中，我将 Chart.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
                    );

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

怎么了？

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

【参考方案1】：

ng2-charts 也有同样的问题

为我做的不是预初始化数据集。 以前我会声明空数组

public data: MultiDataSet = [];

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

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

这将打印甜甜圈图但没有颜色。一切都是灰色的。 根本不用像这样预初始化 MultiDataSet 来解决问题

public data: MultiDataSet; //=[];

【参考方案2】：

原因是你在错误的地方定义了backgroundColor。这是一个dataset property，因此需要在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>

【讨论】：

我认为这不是问题所在。我有没有任何背景的图表，我也有同样的问题。比这更糟糕的情况发生并在页面刷新时自行修复。