Как изменить 'backgroundColor' для конкретного экземпляра 'tags' в "response-chartjs-2" - PullRequest
Новая
       19

Как изменить 'backgroundColor' для конкретного экземпляра 'tags' в "response-chartjs-2"

0 голосов
/ 28 июня 2019

Я хочу изменить backgroundColor только одной записи из массива меток.В моем приложении для «меток» задан массив строковых чисел, поступающих из базы данных.И я хочу, чтобы наибольшее число было, скажем, зеленым.Остальное должно быть, скажем, розовым.

На самом деле я не знаю, как получить доступ к фону каждого экземпляра.Кто-нибудь знает, как это сделать?

Вот чего я хочу достичь: enter image description here

Это то, что я пытался сделать, но это просто чистейшая форма глупости, посколькуработать, и это изменило бы фон всей диаграммы. 

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

1 Ответ

0 голосов
/ 03 июля 2019

Я добился применения разного цвета для каждой этикетки, как это: 

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