reactjs - Highchart 未更新系列状态更改

Question

我正在设置我的系列，如下所示。

   import React, { Component } from "react";
  // Import Highcharts
 import Highcharts from "highcharts/highstock";
 import HighchartsReact from "highcharts-react-official";
 import "../../../../resources/js/motion";
 import HC_more from "highcharts/highcharts-more"; //module

 import * as Services from '../../services/dashboardservices';
 import ProcessData from './bubbleChartMethods';

require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module

class BubbleContainer extends Component {

  style = {
    fontFamily: "'univers', Arial, sans-serif",
    fontSize: 14,
    color: "#333333"
 };

 state = {
    options: {
        chart: {
            height: 380,
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy',
            resetZoomButton: {
                theme: {
                    states: {
                        hover: {
                            fill: '#D98C14',
                            stroke: '#BF7400',
                        }
                    }
                }
            }
        },
        credits: {
            enabled: false
        },

        title: "",

        legend: {
            enabled: false
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: 'Peak Load (A)',
                style: this.style
            },
            labels: {
                format: '{value}',
                style: this.style
            },
            min: 0,
            maxPadding: 0.05,
            plotLines: [{
                color: '#000',
                dashStyle: 'dot',
                width: 2,
                label: {
                    style: this.style,
                    text: 'Peak Load Threshold',
                    align: 'center',
                    verticalAlign: 'middle'
                },
                zIndex: 3,
                value: 30
            }],
            softMax: 0
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false,
            title: {
                text: 'Peak Unbalance (A)',
                style: this.style
            },
            labels: {
                format: '{value}',
                style: this.style
            },
            min: 0,
            maxPadding: 0.1,
            plotLines: [{
                color: '#000',
                dashStyle: 'dot',
                width: 2,
                label: {
                    align: 'center',
                    style: this.style,
                    text: 'Peak Unbalance Threshold'
                },
                zIndex: 3,
                value: 4
            }],
            softMax: 0
        },
        tooltip: {
            useHTML: true,
            padding: 2,
            headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
            pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
                '<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
                '<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
                '<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
            footerFormat: '</table></div>'
        },

        plotOptions: {
            bubble: {
                minSize: 20
            },
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '..',
                    style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
                    color: 'rgba(67, 67, 72, 0.5)'
                },
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            // $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
                        }
                    }
                }
            }
        },
        motion: {
            enabled: true,
            axisLabel: 'year',
            loop: false,
            series: 0, // The series which holds points to update
            updateInterval: 100,
            magnet: {
                round: 'round', // ceil / floor / round
                step: 0.1
            },
            labels: []
        },
        series: [{
            name: 'Things',
            colorByPoint: true,
            id: 'deep',
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)']
                    ]
                }
            },
            data: []
        }]
    }
}
// Render app with demo chart

componentDidMount() {
    Services.getLoadAndUnbalanceData().then(res => {
        const renderObj = ProcessData(res);
        this.setState({
            options: {
                ...this.state.options,
                motion: {
                    ...this.state.options.motion,
                    labels: renderObj.timestamp
                },
                series: [{
                    ...this.state.options.series[0],
                    data: [{
                        sequence: [...renderObj.series[0].sequence]
                    }]
                }],

                xAxis: {
                    ...this.state.options.xAxis,
                    softMax: renderObj.xSoftMax,
                    plotLines: [
                        {
                            ...this.state.options.xAxis.plotLines[0],
                            value: renderObj.maxLoadThreshold,
                            label: {
                                ...this.state.options.xAxis.plotLines[0].label,
                                text: renderObj.xLabelText
                            }
                        }
                    ]
                },
                yAxis: {
                    ...this.state.options.yAxis,
                    softMax: renderObj.ySoftMax,
                    plotLines: [
                        {
                            ...this.state.options.yAxis.plotLines[0],
                            value: renderObj.maxUnbalanceThreshold,
                            label: {
                                ...this.state.options.yAxis.plotLines[0].label,
                                text: renderObj.yLabelText
                            }
                        }
                    ]
                }
            }
        })
    })
}

如果我直接输入数据，则会加载 highchart。

我得到如下数据。

 [{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]

我已经给了我上面的整个班级。

在执行 setState 时，如果我直接将系列数据放入 highchart 将加载。但是，如果我使用从响应中得到的动态数据，那么 highchart 不会将 wrt 加载到数据中。

我正在渲染如下图。

 <HighchartsReact
            highcharts={Highcharts}
            options={this.state.options}
            constructorType={"chart"}
        />

我的问题是如果我使用 setState 动态更改数据图表不呈现。这是什么原因。

但是如果我在渲染中调试所有数据在 setState 之后都可用。但是 highchart 并没有呈现系列变化。

标签： reactjshighchartsreact-highcharts