时间戳

首页 > 解决方案 > 试图更新高位图表数据

react-native - 试图更新高位图表数据

问题描述

我正在尝试通过提供新系列来更新更新按钮上的数据系列。结果，新系列将与旧系列一起绘制。

并且在绘制新系列之后，X 轴上的值被清除了。在这里我附上代码片段，请看。

初始状态配置：

 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),

      },
    ],
  }
};

更新功能：

updateSeries = () => {

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

}

图形渲染代码：

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


);

}

更新图表后的样子 在此处输入图像描述

类组件代码： https ://gist.github.com/cuputil/da00b0ab0866e3a4f9306f0425e92582

还使用功能组件尝试了此代码。

使用功能组件代码： https ://gist.github.com/cuputil/2fc1862f64f3a511158ced3​​c6b64d215

但是同样的事情发生了系列更改但无法根据图像绘制图形属性。此外，未正确计算 X 轴数据。

我正在使用的示例系列数据：

[{{x：1607883000000，y：1.6093}，{x：1607882940000，y：1.6094}，{x：1607882880000，y：1.6093}，x：16078882820000，1607882820000，y：1.6094} 1608：609.608}：1608}：1608} x.1608}：6.1608}：1608：6.608}：6.608}：6.608}; ,{ x: 1607882700000, y: 1.6094 },{ x: 1607882640000, y: 1.6095 },{ x: 1607882580000, y: 1.6094 },{ x: 1607882520000, y: 1.6095 },{ x: 1607882460000, y: 1.6093 } ，{x：1607882400000，y：1.6095}，{x：1607882340000，y：1.6095}，{x：1607882280000，y：1.6088}，x：160788882220000，16078882220000，1608 y：1608 Y：1608 Y：1608} 1608}：1609.1608： ,{ x: 1607882100000, y: 1.6096 },{ x: 1607882040000, y: 1.6096 },{ x: 1607881980000, y: 1.6096 },{ x: 1607881920000, y: 1.6097 },{ x: 1607881860000, y: 1.6097 } ,{ x: 1607881800000, y: 1.6099 },{ x: 1607881740000, y: 1.6101 },{ x: 1607881680000, y: 1.61 },{ x: 1607881620000, y: 1.61 },{ x: 1607881560000, y: 1.6099 } ,{ x: 1607881500000, y: 1.6099 },{ x: 1607881440000, y: 1。6099}，{x：1607881380000，y：1.6098}，{x：1607881320000，y：1.6099}，{x：160781260000，y，y：1.6098} 1.6098}，{x：1607881080000，y：1.6099}，{x：1607881020000，y：1.6098}，{x：160780960000，y，y：1.6099} 1.6098}，{x：1607880780000，y：1.6099}，{x：1607880720000，y：1.6098}，{x：1607880660000，y：1.6096}，：1.6096}，{x：1607880600000 Y：160600000 Y：160600 Y：16000 Y：1600; 1.61}，{x：1607880480000，y：1.6099}，{x：1607880420000，y：1.6101}，{x：1607880360000，y：1.61} 1.61 },{ x: 1607880180000, y: 1.6101 },{ x: 1607880120000, y: 1.6101 },{ x: 1607880060000, y: 1.61 },{ x: 1607880000000, y: 1.6099 },{ x: 1607879940000, y: 1.6099 },{ x: 1607879880000, y: 1.6098 },{ x: 1607879820000, y: 1。61}，{x：1607879760000，y：1.6097}，{x：1607879700000，y：1.6098}，{x：1607879640000，y：16078796} 1.6097 },{ x: 1607879460000, y: 1.6096 },{ x: 1607879400000, y: 1.6095 } ]

标签： react-nativehighcharts

解决方案

好吧，我是反过来做的，这就是为什么我无法重现所描述的错误。好吧，现在我看到了问题，但正如我所想，这是由于传递了未排序的（x 升序）数据造成的，打开浏览器控制台后您会注意到什么，并看到Highcharts #15 错误。

为了使其正常工作，您需要始终确保传递的数据按升序排序（点 x 值随着数组元素索引而增加）。

所以，总而言之，对数组进行排序：

[

  // data here

].sort((a, b) => a.x - b.x)

然后改变你准备（切片）初始数据的方式：

data.slice(data.length - 1 - 15, data.length - 1)

现在它应该可以按预期工作了。

活生生的例子：

推荐阅读