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图表的文档，则可以看到用于设置颜色的所有可用选项：

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

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

即使它不直接使用react-google-charts

，也可以引用该线程

Customize the bar colors in Google Gantt Charts

如何自定义谷歌甘特图条形颜色

1 个答案: