如何在反应中自定义谷歌甘特图栏颜色? [英] how to customize google gantt chart bar color in react ??

问题描述

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

import React, {Fragment} from 'react';导入 'babel-polyfill';导入'../styles/summary-view.styl';导入../styles/react-table.styl"；导入../styles/seriousSafetyEvents-view.styl"；从时刻"导入时刻；从react-google-charts"导入图表；从react-timeline-scribble"导入{时间线，事件}；class SeriousSafetyEventsView 扩展了 React.Component {构造函数(道具){//区域，onFilterChanged，onAreaChanged，currentAreaId，currentLocation，超级(道具)；this.props = 道具;}使成为() {常量严重安全事件列表 = this.props.seriousSafetyEventsList;const sseDates = [];const firstEvent = {};今天常量 = 时刻()；firstEvent.startDate=今天._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();让 daysSince = Math.floor(TotalDays);if(daysSince < 7 && daysSince > 0) {firstEvent.color = "在不到 7 天内捕获的事件";}else if (daysSince > 17) {firstEvent.color = "捕获的事件超过 15 天";}else if (daysSince >6 && daysSince < 18) {firstEvent.color = "在 7 到 17 天之间捕获的事件";}firstEvent.days = daysSince +天"；for(let i=0; i<9; i++) {const sseObject = {};如果(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 持续时间 = moment.duration(lastSeriousEventDate.diff(lastLastSeriousEventDate));const TotalDays = duration.asDays();让 daysSince = Math.floor(TotalDays);if(daysSince < 7 && daysSince > 0) {sseObject.color = "在不到 7 天内捕获的事件";}else if (daysSince > 17) {sseObject.color = "捕获的事件超过 15 天";}else if (daysSince >6 && daysSince < 18) {sseObject.color = "在 7 到 17 天之间捕获的事件";}sseObject.days = daysSince +天"；sseDates.push(sseObject);}}sseDates.unshift(firstEvent);const sseChart = sseDates.map((sseDates, i) =>{返回 ([春秋夏秋"[i],sseDates.days，sseDates.color，sseDates.endDate,sseDates.startDate,'',100,'',])});sseChart.unshift([{ type: 'string', label: 'Task ID' },{ 类型:'字符串'，标签:'任务名称'}，{ 类型:'字符串'，标签:'资源'}，{类型:'日期'，标签:'开始日期'}，{类型:'日期'，标签:'结束日期'}，{ type: 'number', label: 'Duration' },{ type: 'number', label: 'Percent Complete' },{ 类型:'字符串'，标签:'依赖关系'}，]);返回 (<div className="seriousSafetyEvent"><div className="时间线"><片段><h1>严重安全事件</h1><时间线>{seriousSafetyEventsList.map((seriousSafetyEventsList, i) =>{return (<Event key ={i} interval={seriousSafetyEventsList.date}>{seriousSafetyEventsList.reason}</Event>);})}</时间线></片段>

<div className="sseChart"><h2>严重安全事件之间的天数</h2><图表宽度={'100%'}高度={'600px'}图表类型=甘特图"loader={<div>加载图表</div>}数据={sseChart}选项={{高度:700，宽度: '70%',甘特图:{轨道高度:65，酒吧高度:50，启用百分比:假，关键路径启用:假，已启用百分比:假},}}rootProps={{ 'data-testid': '2' }}/>

);}}导出默认 SeriousSafetyEventsView；

解决方案

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

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

https://developers.google.com/chart/interactive/docs/画廊/甘特图

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

也可以参考这个线程，即使它不直接使用react-google-charts

自定义 Google 甘特图中的条形颜色

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;

解决方案

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

这篇关于如何在反应中自定义谷歌甘特图栏颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！