条形图的 ng2 图表中的数据集设置不正确

Question

我正在使用 ng2 图表库创建条形图。在模板中我添加了以下代码

<div class="chart-wrapper">
    <canvas baseChart
    [datasets]="getBarChartData()"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
    </canvas>
</div>

在 component.ts 文件中，我添加了以下代码行，这里我使用了一个取决于范围的函数我正在动态更改条形图的颜色，但是如果我使用这行代码它可以正常工作。

barChartData: ChartDataSets[] = [{
    data: [80, 12, 200, 137, 164, 4, 10, 35],
    label: 'A Bar Chart',
    backgroundColor: ['#99ccff', '#808080']
}];

export class BarchartComponent {
    constructor(private data: ChartService) {}
    barChartOptions: ChartOptions = {
        responsive: true
    };
    barChartLabels: Label[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
    barChartType: ChartType = 'bar';
    barChartLegend = true;
    barChartPlugins = [];


    getBarChartData() {
        const dataSets = [80, 12, 200, 137, 164, 4, 10, 35];
        const low = 2;
        const high = 5;
        const colors = [];
        for (let i = 0; i < dataSets.length; i++) {
            if (i >= (low - 1) && i <= (high- 1)) {
                colors.push('#99ccff')
            } else {
                colors.push('#808080')
            }
        }
        const barChartData: ChartDataSets[] = [{
            data: dataSets,
            label: 'A Bar Chart',
            backgroundColor: colors
        }];
        return barChartData;
    }
}

问题是条形图值没有完全显示。有人可以帮助我如何使用上面的示例设置 bar 的数据。

Answer 1

该问题与 Angular 变化检测有关，它不断运行并且必须一次又一次地评估 canvas 的 datasets 属性。这样图表会不断更新，Chart.js 无法再正确绘制。

避免在 HTML 中直接使用函数 getBarChartData()，而是在组件 class 中创建一个 barChartData 属性。

<canvas baseChart 
  [datasets]="barChartData"
  ...

这个barChartData属性可以在ngOnInit方法中提供如下：

barChartData: ChartDataSets[] = [];
  
ngOnInit() {
  this.barChartData = this.getBarChartData();
}

请看下面的StackBlitz，看看它是如何工作的。

条形图的 ng2 图表中的数据集设置不正确

The dataset in ng2 charts for bar graph is not setting properly

javascript

chart.js

ng2-charts

angular