如何在“ react-chartjs-2”中更改特定“标签”实例的“ backgroundColor”

Question

我想从“标签”数组更改仅一个记录的backgroundColor。 在我的应用程序中，“标签”设置为来自数据库的字符串数组。 我希望最大的数字是绿色。 其余的应该是粉红色的。

我实际上不知道如何访问每个实例的背景。 有人知道该怎么做吗？

这是我要实现的目标：

这是我正在尝试做的事情，但这只是废话的最纯粹的形式，因为它不起作用，并且会改变整个图表的背景。

import React from 'react';
import { Bar, Line, Pie, Doughnut } from 'react-chartjs-2';


export default class Chart extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            chartData: {
                labels: [],
                datasets: [{
                    label: this.props.label,
                    data: [],
                    backgroundColor: '#CD5C94',
                }]
            }
        }
    }

    static defaultProps = {
        displayTitle: true,
    }

    updateChart = () => {
        const newArr = this.props.indexes.map(Number);
        const latestRecord = Math.max(...newArr);
        let color;
        console.log(color)
        this.state.chartData.labels.forEach(label => {

            if (label == latestRecord) {
                this.setState({
                    chartData: {
                        datasets: [{
                            backgroundColor: '#CD5C94',
                        }]
                    }
                })
            } else {
                this.setState({
                    chartData: {
                        datasets: [{
                            backgroundColor: '#CD5C94',
                        }]
                    }
                })

            }
        })

        this.setState({
            chartData: {
                labels: this.props.indexes, //this is the array of numbers as strings
                datasets: [{
                    label: this.props.label, //this is the label of the chart
                    data: this.props.results, //this is the array of total travel cost records 
                    // backgroundColor: ,
                }]
            }
        })
    }


    render() {

        return (
            <div className="myChart">
                <button className="bmi-form__button" onClick={this.updateChart}>DISPLAY CHART DATA</button>
                <div className="chart">
                    <Doughnut
                        data={this.state.chartData}
                        width={100}
                        height={50}
                        options={{
                            title: {
                                display: this.props.displayTitle,
                                text: this.props.text,
                                fontSize: 25
                            }
                        }
                        }
                    />
                </div>
            </div>
        )
    }
}

Answer 1

我已经实现了为每个标签应用不同的颜色，如下所示：

const colorMap = {
    'Entertainment': '#FF6384',
    'Food': '#36A2EB',
    'Gas': '#FFCE56',
    'Other': '#38c172'
};

const labels = ['Food', 'Other'];
const colors = labels.map(l => colorMap[l]);
const chartData = {
    labels,
    datasets: [{
        backgroundColor: colors,
        borderColor: colors,
        data: []
    }]
};

<Doughnut data={chartData}/>