0

我正在尝试将动态颜色推送到我的图表中，但我很难这样做。在我的状态下，我的数据集的对象数组中有背景颜色。但是，我不确定如何将动态颜色推入其中。

我需要推送所有这些颜色的原因是因为我最终要从我的数据集中的数据库中提取动态数据，所以我决定为图表创建随机动态颜色。硬编码数据现在是占位符。

我在网上读到我可以使用 Immutability Helpers 来实现将这些颜色推送到深层嵌套对象中，但我很难弄清楚。

这是我的代码：

import React from 'react';

import reportsService from '../../services/reportsService';
import update from 'react-addons-update';

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

class Reportspage extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            chartData: {
                // Placeholder labels for now
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: 'Population',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: []
                }]
            }
        }
    }

    chartColors(){
        let colors = [];
        // Start with 100 random colors for now. If data increases, increase loop value
        for(let i = 0; i < 100; i++) {
            let r = Math.floor(Math.random() * 200);
            let g = Math.floor(Math.random() * 200);
            let b = Math.floor(Math.random() * 200);
            let c = 'rgb(' + r + ', ' + g + ', ' + b + ')';
            colors.push(c);
        }
        // How can I push these colors inside of my deep nested state?
        this.setState({
            chartData: update(this.state.chartData.datasets, {datasets: {$set: colors}})
        })
    }


    async componentDidMount(){
        this.chartColors();

        const showReports = await reportsService.showDowntime();

        console.log(showReports);

        console.log(this.state);
    }

    render(){
        return (
            <div className="fluid-container">
                <div className="container">
                    <h1>Reports</h1>
                    <div className="chartContainer">
                        <Bar
                            data={this.state.chartData}
                            options={{
                                maintainAspectRatio: false
                            }}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

export default Reportspage;

4

0 回答 0