我是Highcharts的新手。我想实现这样的2个图表

charts

为此，我创建了一个自定义折线图组件，用highcharts替换现有的库。我创建的组件包含接口，

export interface LineChartProps {
  title?: string;
  xTitle?: string;
  yTitle?: string;
  chartWidth?: number;
  chartHeight?: number;
  seriesData: any[][];
  seriesColor: string[];
  gridLine?:boolean;
  name?: any;
}

修改之前的代码是

private getAlertTrendGraph = (alertTrendData: TrendType) => {
        /* Reading in the Alert Trend API Data and constructing the Chart Lines. */
        let result = ['Low', 'Medium', 'High'].map((keyValue, index) => {
            if (alertTrendData.values[keyValue] !== undefined) {

                let alertTrendValue = alertTrendData.values[keyValue].map((data) => {
                    return (parseInt(data, 10));
                });
                let color = '#FFFFFF';
                if (keyValue === 'Low') {
                    color = '#27AEF0';
                }
                else if (keyValue === 'Medium') {
                    color = '#FFC627';
                }
                else if (keyValue === 'High') {
                    color = '#ED3124';
                }
                return (
                    <Chart.Line
                        key={'AlertTrend' + index}
                        name={keyValue}
                        data={alertTrendValue}
                        color={color}
                    />
                );
            } else {
                return;
            }
        });
        return result;

    }

    private complianceTrendGraph = (complianceTrendData: TrendType) => {
        /* Reading in the Compliance Trend API Data and constructing the Chart Lines. */
        let result = complianceTrendData.keys.map((keyValue, index) => {
            let complianceTrendValue = complianceTrendData.values[keyValue].map((data) => {
                return (parseFloat(data));
            });
            return (
                <Chart.Line
                    key={'ComplianceTrend' + index}
                    name={keyValue}
                    data={complianceTrendValue}
                />
            );
        });
        return result;
    }

    convertUTCToLocalDate(timestamps:Array<string>){
        let localTimestamps:any=[];
        timestamps.map((dateTime)=>{
        const sp=dateTime.toString().split(" ");
        if(sp[0]! && sp[1]!){
        const date = new Date(sp[0]);
        const month =((date.getMonth()+1)<10)?"0"+(date.getMonth()+1):(date.getMonth()+1);
        const day =(date.getDate()<10)?"0"+date.getDate():date.getDate();
        let str1=date.getFullYear()+'-' + month+'-'+day+'T'+sp[1];
        let ISOdate=new Date(str1+'Z');
        const utc=moment.utc(ISOdate);
        const local=utc.local();
        localTimestamps.push(local.format('DD MMM YYYY').toString());
    }
  });
  return localTimestamps;
}  

    onTabChange = (index: number) => {
        const store = this.props.dashboardStore!;
        if(index === 1 && !this.alertTrendGraph[0]) {
            store.updateLoaderCount();
            store.postDataQuery('AlertTrend', this.category, this.data,'');
        }
    }    

    componentWillUnmount() {
        this.alertTrendGraph = undefined;
    }

    render() {
        const store = this.props.dashboardStore!;
        let alertTrendData = toJS(store.alertTrend!);
        let complianceTrendData = toJS(store.complianceTrend!);
        if (alertTrendData.keys === undefined || complianceTrendData.keys === undefined) {
            return (
                <div />
            );
        } else {
            alertTrendData.timestamps = this.convertUTCToLocalDate(alertTrendData.timestamps);
            complianceTrendData.timestamps = this.convertUTCToLocalDate(complianceTrendData.timestamps);
            this.alertTrendGraph = this.getAlertTrendGraph(alertTrendData);
            let complianceTrendGraph = this.complianceTrendGraph(complianceTrendData);

            return (
                <div className="systemview-graph">
                    <Tab defaultActiveIndex={0} onTabChange={(activeIndex)=>(this.onTabChange(activeIndex))} >
                        <Tab.Pane title="Score Trend">
                            <Chart animation={false} height="350" key="Chart2">
                                {complianceTrendGraph}
                                <Chart.YAxis
                                    showGridLines={true}
                                    gridLineColor="#202020"
                                    labels={{ enabled: false }}
                                    tickLength={5}
                                    tickWidth={1}
                                    lineWidth={1}
                                    lineColor="white"
                                    min={0.0}
                                    max={100.0}
                                    title={{text: "Percent(%)", style: { color: 'white', fontSize: '15px' } }}
                                />
                                <Chart.XAxis
                                    showGridLines={false}
                                    labels={{ style: { color: 'white', fontSize: '15px' } }}
                                    tickLength={10}
                                    tickWidth={1}
                                    tickColor="white"
                                    categories={complianceTrendData.timestamps}

                                />
                                <Chart.Legend
                                    align="left"
                                    verticalAlign="bottom"
                                />
                            </Chart>
                        </Tab.Pane>
                        <Tab.Pane title="Alert Trend">
                            <Chart animation={false} height="350" key="Chart1">
                                {this.alertTrendGraph}
                                <Chart.YAxis
                                    showGridLines={true}
                                    gridLineColor="#202020"
                                    labels={{ enabled: false }}
                                    tickLength={5}
                                    tickWidth={1}
                                    lineWidth={1}
                                    lineColor="white"
                                />

                                <Chart.XAxis
                                    showGridLines={false}
                                    labels={{ style: { color: 'white', fontSize: '15px' } }}
                                    tickLength={10}
                                    tickWidth={1}
                                    tickColor="white"
                                    categories={alertTrendData.timestamps}
                                />
                                <Chart.Legend
                                    align="left"
                                    verticalAlign="bottom"
                                />
                            </Chart>
                        </Tab.Pane>

                    </Tab>
                </div>
            );
        }

现在修改后的代码是

private getAlertTrendGraph = (alertTrendData: TrendType) => {
        /* Reading in the Alert Trend API Data and constructing the Chart Lines. */
        let result = ['Low', 'Medium', 'High'].map((keyValue, index) => {
            if (alertTrendData.values[keyValue] !== undefined) {

                let alertTrendValue = alertTrendData.values[keyValue].map((data) => {
                    return (parseInt(data, 10));
                });
                let color = '#FFFFFF';
                if (keyValue === 'Low') {
                    color = '#27AEF0';
                }
                else if (keyValue === 'Medium') {
                    color = '#FFC627';
                }
                else if (keyValue === 'High') {
                    color = '#ED3124';
                }
                return (
                    <LineChart
                        key={'AlertTrend' + index}
                        name={keyValue}
                        seriesData={[alertTrendValue]}
                        seriesColor={[color]} 
                        />
                );
            } else {
                return;
            }
        });
        return result;

    }

    private complianceTrendGraph = (complianceTrendData: TrendType) => {
        /* Reading in the Compliance Trend API Data and constructing the Chart Lines. */
        let result = complianceTrendData.keys.map((keyValue, index) => {
            let complianceTrendValue = complianceTrendData.values[keyValue].map((data) => {
                return (parseFloat(data));
            });
            return (
                <LineChart
                    key={'ComplianceTrend' + index}
                    name={keyValue}
                    seriesData={[complianceTrendValue]} 
                    seriesColor={['#FFFFFF']}                
                />
            );
        });
        return result;
    }

    convertUTCToLocalDate(timestamps:Array<string>){
        let localTimestamps:any=[];
        timestamps.map((dateTime)=>{
        const sp=dateTime.toString().split(" ");
        if(sp[0]! && sp[1]!){
        const date = new Date(sp[0]);
        const month =((date.getMonth()+1)<10)?"0"+(date.getMonth()+1):(date.getMonth()+1);
        const day =(date.getDate()<10)?"0"+date.getDate():date.getDate();
        let str1=date.getFullYear()+'-' + month+'-'+day+'T'+sp[1];
        let ISOdate=new Date(str1+'Z');
        const utc=moment.utc(ISOdate);
        const local=utc.local();
        localTimestamps.push(local.format('DD MMM YYYY').toString());
    }
  });
  return localTimestamps;
}  

    onTabChange = (index: number) => {
        const store = this.props.dashboardStore!;
        if(index === 1 && !this.alertTrendGraph[0]) {
            store.updateLoaderCount();
            store.postDataQuery('AlertTrend', this.category, this.data,'');
        }
    }    

    componentWillUnmount() {
        this.alertTrendGraph = undefined;
    }

    render() {
        const store = this.props.dashboardStore!;
        let alertTrendData = toJS(store.alertTrend!);
        let complianceTrendData = toJS(store.complianceTrend!);
        if (alertTrendData.keys === undefined || complianceTrendData.keys === undefined) {
            return (
                <div />
            );
        } else {
            alertTrendData.timestamps = this.convertUTCToLocalDate(alertTrendData.timestamps);
            complianceTrendData.timestamps = this.convertUTCToLocalDate(complianceTrendData.timestamps);
            this.alertTrendGraph = this.getAlertTrendGraph(alertTrendData);
            let complianceTrendGraph = this.complianceTrendGraph(complianceTrendData);

            return (
                <div className="systemview-graph">
                    <Tab defaultActiveIndex={0} onTabChange={(activeIndex)=>(this.onTabChange(activeIndex))} >
                        <Tab.Pane title="Score Trend">
                                <LineChart 
                                seriesData={[complianceTrendGraph]} 
                                seriesColor={['#1792E5']} />
                              
                        </Tab.Pane>
                        <Tab.Pane title="Alert Trend">
                            <LineChart 
                            seriesData={[this.alertTrendGraph]} 
                            seriesColor={['#1792E5']} />
                        </Tab.Pane>

                    </Tab>
                </div>
            );
        }
    }
}

我无法得到准确的图表。有人能帮我一下吗。先谢了。