我正在尝试通过提供新系列来更新更新按钮上的数据系列。因此，新系列将与旧系列一起策划。
并且在绘制新系列之后，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/cupatil/da00b0ab0866e3a4f9306f0425e92582
还使用功能组件尝试了此代码。
使用功能组件代码: https://gist.github.com/cupatil/2fc1862f64f3a511158ced3c6b64d215
但同样的事情发生了系列改变但无法根据图像绘制图形属性。此外，X 轴数据计算不正确。
我正在使用的样本系列数据:
[ { x: 1607883000000, y: 1.6093 },{ x: 1607882940000, y: 1.6094 },{ x: 1607882880000, y: 1.6093 },{ x: 1607882820000, y: 1,60800,6 {70882820000, y: 1,6080,6 } :1.6094}，{x:1607882700000，y:1.6094}，{x:1607882640000，y:1.6095}，{x:160782580000，y:1.6094} :1.6093}，{x:1607882400000，y:1.6095}，{x:1607882340000，y:1.6095}，{x:160782280000，y:1.6088} :1.6095}，{x:1607882100000，y:1.6096}，{x:1607882040000，y:1.6096}，{x:160781980000，y:1.6096} :1.6097}，{x:1607881800000，y:1.6099}，{x:1607881740000，y:1.6101}，{x:160781680000，y:1.61} :1.6099}，{x:1607881500000，y:1.6099}，{x:1607881440000，y:1.6099}，{x:1607881380000，y:1.6098} : 1.6098 },{ x: 1607881200000, y: 1.6098 },{ x: 16 07881140000，y:1.6098}，{x:1607881080000，y:1.6099}，{x:1607881020000，y:1.6098}，{x:1607880960000 1607880840000，y:1.6098}，{x:1607880780000，y:1.6099}，{x:1607880720000，y:1.6098}，{x:1607880660000，y:1607880660000，y:1.6096} 000 Y:160000 Y:1600:160:160::160::160.16:16.160.16:16.160.16:16.16:16.16::160:16.16:160.16::160::::160.16::160.16::160::16.160.16; 1607880540000，y:1.61}，{x:1607880480000，y:1.6099}，{x:1607880420000，y:1.6101}，{x:1607880360000 1607880240000，y:1.61}，{x:1607880180000，y:1.6101}，{x:1607880120000，y:1.6101}，{x:x:1607880060000，y:1.61} 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:1607779460000，y:160779460000，y:1.6096} <16096}，x:160 Y:16077:1607.16.16.16.16::16.16.16.16.16:::160 Y: >
最佳答案
好吧，我是反过来做的，这就是为什么我无法重现所描述的错误。好吧，现在我看到了问题，但正如我所想，这是由传递未排序(x 升序)数据引起的，打开浏览器控制台后您会注意到，并看到 Highcharts #15 error。 .
为了使其正常工作，您需要始终确保您传递的数据是按升序排序的(点 x 值随数组元素索引增加) ).
因此，总结一下，对数组进行排序:
[
// data here
].sort((a, b) => a.x - b.x)
然后更改准备(切片)初始数据的方式:
data.slice(data.length - 1 - 15, data.length - 1)
现在它应该按预期工作了。
实例:
关于react-native - 尝试更新高位图表数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65235495/