如何更改 "react-chartjs-2" 中特定 'labels' 实例的 'backgroundColor'

Question

我只想更改 'labels' 数组中一条记录的背景颜色。在我的应用程序中，'labels' 设置为来自数据库的字符串化数字数组。我希望最大的数字是绿色。比方说，其余的应该是粉红色的。

其实我并不知道如何访问各个实例的后台。有人知道该怎么做吗？

这就是我想要实现的：

这就是我想要做的，但它只是最纯粹的废话形式，因为它不起作用并且会改变整个图表的背景。

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}/>

如何更改 "react-chartjs-2" 中特定 'labels' 实例的 'backgroundColor'

How to change 'backgroundColor' of a specific 'labels' instance in "react-chartjs-2"

javascript

reactjs

react-chartjs