Chart.js圆环图仍为灰色-无颜色

yzckvree 于 2023-08-05 发布在 Chart.js

关注(0)|答案(3)|浏览(193)

我有一个由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需要在数据集中而不是在新图表中。算了

chart.js

来源：https://stackoverflow.com/questions/42939098/chart-js-donut-chart-remains-grey-no-color

3条答案

按热度按时间

3j86kqsm1#

原因是您在错误的地方定义了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
});

个字符

赞(0）回复(0）举报 2023-08-05

7eumitmz2#

在ng 2-charts中遇到了完全相同的问题
对我来说，这不是预初始化数据集。以前我会声明一个空数组

public data: MultiDataSet = [];

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

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

型
这将打印甜甜圈图表，但没有颜色。一切都是灰色的。只需不像这样预初始化MultiDataSet就可以解决问题

public data: MultiDataSet; //=[];

型

赞(0）回复(0）举报 2023-08-05

jmo0nnb33#

在图表选项中，将forceOverride选项设置为true，如下所示。（如果你使用React）

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

字符串

赞(0）回复(0）举报 2023-08-05

我来回答

Chart.js圆环图仍为灰色-无颜色

3条答案

相关问题

热门标签

最新问答