尝试更新高图表数据 [英] 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.
绘制新系列后，将清除X轴上的值.在这里，我附上代码片段，请看一下.
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.
初始状态配置:
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>
);
}
更新后的图形看起来像
After updating graph looks like
类组件代码: https://gist.github.com/cupatil/da00b0ab0866e3a4f9306f0425e92582
还使用功能组件尝试了此代码.
Also tried this code using a functional component.
使用功能组件代码: https://gist.github.com/cupatil/2fc1862f64f3a511158ced3c6b64d215
但是同样的事情发生了，但是系列发生了变化，但无法根据图像绘制graph属性.另外，X轴数据计算不正确.
But the same thing happens series changed but not able to plot the graph property as per the image. Also, X-Axis data not calculated properly.
我正在使用的样品系列数据:
[{x:1607883000000，y:1.6093}，{x:1607882940000，y:1.6094}，{x:1607882880000，y:1.6093}，{x:1607882820000，y:1.6094}，{x:1607882760000，y:1.6094}，{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:1607882220000，y:1.6096}，{x:1607882160000，y:1.6095}，{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:1607881260000，y:1.6098}，{x:1607881200000，y:1.6098}，{x:1607881140000，y:1.6098}，{x:1607881080000，y:1.6099}，{x:1607881020000，y:1.6098}，{x:1607880960000，y:1.6099}，{x:1607880900000，y:1.6098}，{x:1607880840000，y:1.6098}，{x:1607880780000，y:1.6099}，{x:1607880720000，y:1.6098}，{x:1607880660000，y:1.6096}，{x:1607880600000，y:1.6097}，{x:1607880540000，y:1.61}，{x:1607880480000，y:1.6099}，{x:1607880420000，y:1.6101}，{x:1607880360000，y:1.61}，{x:1607880300000，y:1.6101}，{x:1607880240000，y: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:1.6096}，{x:1607879580000，y:1.6096}，{x:1607879520000，y:1.6097}，{x:1607879460000，y:1.6096}，{x:1607879400000，y:1.6095}]
[ { x: 1607883000000, y: 1.6093 },{ x: 1607882940000, y: 1.6094 },{ x: 1607882880000, y: 1.6093 },{ x: 1607882820000, y: 1.6094 },{ x: 1607882760000, y: 1.6094 },{ 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: 1607882220000, y: 1.6096 },{ x: 1607882160000, y: 1.6095 },{ 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: 1607881260000, y: 1.6098 },{ x: 1607881200000, y: 1.6098 },{ x: 1607881140000, y: 1.6098 },{ x: 1607881080000, y: 1.6099 },{ x: 1607881020000, y: 1.6098 },{ x: 1607880960000, y: 1.6099 },{ x: 1607880900000, y: 1.6098 },{ x: 1607880840000, y: 1.6098 },{ x: 1607880780000, y: 1.6099 },{ x: 1607880720000, y: 1.6098 },{ x: 1607880660000, y: 1.6096 },{ x: 1607880600000, y: 1.6097 },{ x: 1607880540000, y: 1.61 },{ x: 1607880480000, y: 1.6099 },{ x: 1607880420000, y: 1.6101 },{ x: 1607880360000, y: 1.61 },{ x: 1607880300000, y: 1.6101 },{ x: 1607880240000, y: 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: 1.6096 },{ x: 1607879580000, y: 1.6096 },{ x: 1607879520000, y: 1.6097 },{ x: 1607879460000, y: 1.6096 },{ x: 1607879400000, y: 1.6095 } ]
推荐答案
好的，我反过来这样做了，这就是为什么我无法重现所描述的错误.好了，现在我看到了问题，但是正如我所想，这是由于传递未排序的(x升序)数据引起的，打开浏览器控制台后您会注意到什么，并看到
All right, I was doing it the other way around, and that's why I was not able to reproduce the described error. Well, so now I see the problem, but as I thought, it's caused by passing not sorted (x ascending order) data, what you can notice after opening the browsers console, and see the Highcharts #15 error.
为了使其正常工作，您需要始终确保传递的数据是按升序排序的(点x值随着数组元素索引的增加而增加)).
In order to make it work correctly, you need to always make sure that you're passing the data, which is sorted in ascending order (point x values are increasing along with the array element index).
因此，总而言之，对数组进行排序:
So, to sum up, sort the array:
[
// data here
].sort((a, b) => a.x - b.x)
然后更改您准备(切片)初始数据的方式:
then change the the way you prepare (slice) the initial data:
data.slice(data.length - 1 - 15, data.length - 1)
现在它应该可以正常工作了.
and now it should work as expected.
实时示例:
- 没有React: https://jsfiddle.net/BlackLabel/37cdryg9/
- 使用React: https://codesandbox.io/s/highcharts-react-demo-forked-q3whu
这篇关于尝试更新高图表数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
