如何在反应中自定义谷歌甘特图栏颜色？

Question

below is my code where i am caluclating the days based on the start and end dates and I want to customize the bar colors based on the number of days like if its above 15 I need the bar color to be green and below 7 it should be red. Please let me know if you have any idea on how to customize the bar colors. Thank you.

import React, {Fragment} from 'react';
import 'babel-polyfill';
import '../styles/summary-view.styl';
import "../styles/react-table.styl";
import "../styles/seriousSafetyEvents-view.styl";
import moment from "moment";
import Chart from "react-google-charts";
import { Timeline, Event } from "react-timeline-scribble";


class SeriousSafetyEventsView extends React.Component {
    constructor(props) { // areas, onFilterChanged, onAreaChanged, currentAreaId, currentLocation,
        super(props);
        this.props = props;
    }

    render() {

        const seriousSafetyEventsList = this.props.seriousSafetyEventsList;

        const sseDates = [];
        const firstEvent = {};
        const today = moment();
        firstEvent.startDate= today._d;
        today.format('M/D/YYYY');

        const firstEventDate = moment(seriousSafetyEventsList[0].date);
        firstEvent.endDate = firstEventDate._d;
        firstEventDate.format('M/D/YYYY');

        const firstEventDaysSince = moment.duration(today.diff(firstEventDate));
        const TotalDays = firstEventDaysSince.asDays();
        let daysSince = Math.floor(TotalDays);
        if(daysSince < 7 && daysSince > 0) {
            firstEvent.color = "Events captured in less than 7 days";
        }
        else if (daysSince >17) {
            firstEvent.color = "Events captured more than 15 days";
        }
        else if (daysSince >6 && daysSince < 18) {
            firstEvent.color = "Events captured between 7 and 17 days ";
        }

        firstEvent.days = daysSince + " days";

        for(let i=0; i<9; i++) {
            const sseObject = {};
            if(i<8) {
                const lastSeriousEventDate = moment(seriousSafetyEventsList[i].date);
                const lastLastSeriousEventDate = moment(seriousSafetyEventsList[i + 1].date);
                sseObject.startDate = lastSeriousEventDate._d;
                sseObject.endDate = lastLastSeriousEventDate._d;
                lastSeriousEventDate.format('M/D/YYYY');
                const duration = moment.duration(lastSeriousEventDate.diff(lastLastSeriousEventDate));
                const TotalDays = duration.asDays();
                let daysSince = Math.floor(TotalDays);
                if(daysSince < 7 && daysSince > 0) {
                    sseObject.color = "Events captured in less than 7 days";
                }
                else if (daysSince >17) {
                    sseObject.color = "Events captured more than 15 days";
                }
                else if (daysSince >6 && daysSince < 18) {
                    sseObject.color = "Events captured between 7 and 17 days ";
                }
                sseObject.days = daysSince + " days";
                sseDates.push(sseObject);
            }
        }

        sseDates.unshift(firstEvent);
        const sseChart = sseDates.map((sseDates, i) =>
        {return ([

            "SpringFallSummerAutumn"[i],
            sseDates.days,
            sseDates.color,
            sseDates.endDate,
            sseDates.startDate,
            '',
            100,
            '',
        ] )});


        sseChart.unshift([
            { type: 'string', label: 'Task ID' },
            { type: 'string', label: 'Task Name' },
            { type: 'string', label: 'Resource' },
            { type: 'date', label: 'Start Date' },
            { type: 'date', label: 'End Date' },
            { type: 'number', label: 'Duration' },
            { type: 'number', label: 'Percent Complete' },
            { type: 'string', label: 'Dependencies' },
        ]);


        return (

            <div className="seriousSafetyEvent">
                <div className="timeline">
                    <Fragment>
                        <h1>Serious Safety Events</h1>
                        <Timeline>
                            {seriousSafetyEventsList.map((seriousSafetyEventsList, i) =>
                            {return (<Event key ={i} interval={seriousSafetyEventsList.date}>{seriousSafetyEventsList.reason}</Event>);})}
                        </Timeline>
                    </Fragment>
                </div>

                <div className="sseChart">
                    <h2>Days between Serious Safety Events</h2>
                    <Chart
                        width={'100%'}
                        height={'600px'}
                        chartType="Gantt"
                        loader={<div>Loading Chart</div>}
                        data={sseChart}
                        options={{
                            height: 700,
                            width: '70%',
                            gantt: {
                                trackHeight: 65,
                                barHeight: 50,
                                percentEnabled: false,
                                criticalPathEnabled: false,
                                percentDoneEnabled: false
                            },
                        }}
                        rootProps={{ 'data-testid': '2' }}
                    />
                </div>
            </div>
        );
    }
}

export default SeriousSafetyEventsView;

Answer 1

So, firstly you really need to break down your code into functions it's very difficult to read :P

But to answer your question, if you refer to the docs for Google Charts you can see all the available options for setting the colours:

https://developers.google.com/chart/interactive/docs/gallery/ganttchart

what it doesn't mention is there's a palette option where you define an array of colours for it to use.

Also can refer to this thread, even though it doesn't directly use react-google-charts

Customize the bar colors in Google Gantt Charts