如何解决收到新道具时,海图坠毁
我正在使用Highcharts创建以下图形:
青色的中线是X轴,“ I”形光标由3个LineSeries
分量组成。
下面是render()
上的一些代码。为了简化起见,我删除了参数的计算,但是我验证了所有data
,min
,max
等参数在渲染时都不为空。
const plotOptions = {
series: {
enableMouseTracking: false,animation: false,marker: {
states: {
hover: {
enabled: false
}
}
},},area: {
softThreshold: true,spline: {
animation: false,line: {
animation: false,}
}
return (
<div className="app">
<HighchartsChart plotOptions={plotOptions}>
<Chart
backgroundColor='#FFFFFF'
marginTop={margin_top}/>
<XAxis
gridLineWidth={0}
lineWidth={0}
minorTickLength={0}
tickLength={0}
min={scale['min'] - 5}
max={scale['max'] + 5}
labels={x_labels}
/>
<YAxis id="number" gridLineWidth={0} min={-205} max={205} labels='None'>
<LineSeries
id="x_axis"
data={[{x: scale['min'],y: 0},{x: scale['max'],y: 0}]}
color='#00abff'
lineWidth={3}
marker='None'
/>
<LineSeries
id="cursor"
data={ci_cursor}
color='#0f41d7'
lineWidth={4}
/>
<LineSeries
id="cursor_top"
data={ci_cursor_top}
color='#0f41d7'
lineWidth={4}
marker='None'
/>
<LineSeries
id="cursor_bottom"
data={ci_cursor_bottom}
color='#0f41d7'
lineWidth={4}
marker='None'
dataLabels={{
'enabled': true,'formatter': function() {
return 'lower value: ' + range_min;
},'style': label_style,'y': 30,'x': this.label_x_offset() - 10,'align': 'left'
}}
/>
<LineSeries
id="upper_straight"
data={upper_straight_data}
color='#000028'
lineWidth={2}
marker='None'
/>
<LineSeries
id="upper_straight"
data={upper_straight_data}
color='#000028'
lineWidth={2}
marker='None'
/>
<SplineSeries
id="ci_upper"
name="ci_upper"
data={upper_graph_data}
color='#0f41d7'
marker='None'
/>
<LineSeries
id="lower_straight"
data={lower_straight_data}
color='#0f41d7'
lineWidth={2}
marker='None'
/>
<SplineSeries
id="ci_lower"
name="ci_lower"
data={lower_graph_data}
color='#0f41d7'
marker='None'
/>
</YAxis>
</HighchartsChart>
);
页面上有一些控制此图的滑块。当道具改变时,会发生以下错误:
highcharts.src.js:35561 Uncaught TypeError: Cannot use 'in' operator to search for 'symbol' in None
at e.update (highcharts.src.js:35561)
at Series.js:117
at commitHookEffectListMount (react-dom.development.js:19731)
at commitPassiveHookEffects (react-dom.development.js:19769)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at flushPassiveEffectsImpl (react-dom.development.js:22853)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushPassiveEffects (react-dom.development.js:22820)
at performSyncWorkOnRoot (react-dom.development.js:21737)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at Object.batchedUpdates$1 [as unstable_batchedUpdates] (react-dom.development.js:21862)
at HTMLDocument.run (addEventListener.js:5)
上述Series.js
中的行是这样的:
var modifiedProps = getModifiedProps(prevProps,rest);
if (modifiedProps !== false) {
> series.update(modifiedProps,false);
doRedraw = true;
}
引起麻烦的特定LineSeries
是底部光标(水平线):
<LineSeries
id="cursor_bottom"
data={ci_cursor_bottom}
color='#0f41d7'
lineWidth={4}
marker='None'
dataLabels={{
'enabled': true,'align': 'left'
}}
/>
为什么会这样?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。