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

Question

下面是我的代码，我在其中根据开始日期和结束日期计算天数，我想根据天数自定义条形颜色，例如它是否高于 15 我需要条形颜色为绿色且低于 7它应该是红色的。如果您对如何自定义条形颜色有任何想法，请告诉我。谢谢。

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

所以，首先你真的需要把你的代码分解成很难阅读的函数：P

但要回答您的问题，如果您参考 Google Charts 的文档，您可以看到所有用于设置颜色的可用选项：

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

它没有提到的是有一个palette 选项，您可以在其中定义一组颜色供它使用。

也可以参考这个贴，虽然不直接用react-google-charts

Customize the bar colors in Google Gantt Charts