无法根据其值更改柱形图的颜色答案

【问题标题】：Cannot change the color of column chart according to its value无法根据其值更改柱形图的颜色
【发布时间】：2021-10-16 18:22:24
【问题描述】：

我需要完全使用它来实现此代码。这是我的代码示例：

 barChartOptions: ChartOptions = {
        responsive: true,
    };
    barChartColors: Color[] = [
        {
        backgroundColor: 'forestgreen',
        borderColor: 'white',
        borderWidth: 3
    }, {
        backgroundColor: 'red',
        borderColor: 'white',
        borderWidth: 3
    }];
    barChartLabels: Label[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
        '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
    barChartType: ChartType = 'bar';
    barChartLegend = false;
    barChartPlugins = [];

    barChartData: ChartDataSets[] = [
        {
            data: [11, 12, 12, 14, 14, 19, 22, 28, 29, -30, 31, 31, 35, 35, 35, -37, 37, 40, 40, 41, 45, 45, 48, 51, 57,
                62, 65, 69, 69, 71, 75]
        }
    ];

这是我的代码的 HTML 部分，但它不起作用：

<div class="chart-wrapper" style="width: 100%">
                    <canvas baseChart
                            [colors]="barChartData>0 ? barChartColors[0] : barChartColors[1]"
                            [datasets]="barChartData"
                            [labels]="barChartLabels"
                            [options]="barChartOptions"
                            [plugins]="barChartPlugins"
                            [legend]="barChartLegend"
                            [chartType]="barChartType">
                    </canvas>
                </div>

[colors]="barChartData>0 ? barChartColors[0] : barChartColors[1]" 这行给了我这个错误：

颜色类型不能分配给颜色类型[]
DashboardComponent.barChartData: ChartDataSets[]
DashboardComponent.barChartColors: 颜色[]

另外，编译器给我这个：

运算符 '>' 不能应用于类型 'ChartDataSets[]' 和 'number'。[colors]="barChartData>0 ? barChartColors['forestgreen'] : barChartColors['red']"强>

你能帮我解决这个问题吗？

【问题讨论】：

标签： javascript html css angular chart.js

【解决方案1】：

barChartData 是一个包含单个元素的 ChartDataSets 数组。因此，要使其正常工作，您可以按如下方式更改代码：

[colors]="barChartData[0].data.map(v => v > 0 ? barChartColors[0] : barChartColors[1])"

或者更紧凑...

[colors]="barChartData[0].data.map(v => barChartColors[v > 0 ? 0 : 1])"

此代码在ChartDataSets 内的data 数组上使用Array.map()。它返回一个新的array，每个值都有相应的颜色。

【讨论】：