如何在“ 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}/>