Trying to update high chart data

问题

I am trying to update the data series on the update button by providing new series. As the result, new series will be a plotting along with the old series.

And After plotting the new series, the values on are X-axis is clear up. Here I Am attaching the code snippet please have look.

Initial State config:

 this.state = {
  chartOptions: {
    credits: {
      enabled: false,
    },
    chart: {
      type: 'spline',
    },

    title: {
      text: 'Chart',
    },
    plotOptions: {
      series: {
        shadow: false,
        marker: {
          enabled: false,
        },
      },
    },
    xAxis: {
      gridLineWidth: 1,
      type: 'datetime',
      lineColor: '#999',
      lineWidth: 1,

      title: {
        text: 'Time',
        style: {
          color: '#000',
        },
      },
    },
    yAxis: [
      {
          title: {
          text: 'Value',
        },

        gridLineWidth: 1,

        lineWidth: 1,
        opposite: true,
        

        plotLines: [
          {
            color: '#55c2ea',
            width: 2,
            value: props.data[0][1], // Need to set this probably as a var.
            label: {
              text: props.data[0][1],
              textAlign: 'left',
              verticalAlign: 'middle',
              style: {
                color: '#55c2ea',
                fontSize: 16,
                borderWidth: 1,
                backgroundColor: '#55c2ea',
                borderColor: '#55c2ea',
              },
              x: 330,
            },
          },
        ],
        accessibility: {
          enabled: true,
        },
        opposite: true,
      },
    ],
    time: {
      useUTC: false
    },
    series: [
      {
        showInLegend: false,

        color: '#FF0000',
        data: props.data.slice(0, props.tradingInterval),

      },
    ],
  }
};

Update Function:

updateSeries = () => {

this.setState({ chartOptions: {
  series: [
    
    { 
      showInLegend: false,
      color: '#FF0000',
      data: this.props.data.slice(0, 15),}
  ]
} })

}

Graph Render code:

render() {
return (
  <View style={styles.container}>
    <HighchartsReactNative
      styles={styles.chart}
      options={this.state.chartOptions}
    />
    <Button
      title="Refresh"
      onPress={this.updateSeries.bind(this)}/>
  </View>


);

}

After updating graph looks like

Code: https://gist.github.com/cupatil/da00b0ab0866e3a4f9306f0425e92582

来源：https://stackoverflow.com/questions/65235495/trying-to-update-high-chart-data

标签

react-native

Highcharts