.add指向多个y轴，冻结浏览器

Question

我有一个图表，其中多个系列被添加到超过 1 个 yAxis。每当我尝试调用.addPoint到第一个 yAxis 以外的任何内容时，该浏览器选项卡的 JS 运行时都会冻结。

如果我只是将我的系列添加到第一个 yAxis，点就会成功添加到图表中。下面是我的代码(在Clojurescript中(。我需要做一些明显的事情来促进绘制到多个 yAxis(es(吗？

;; CHART SETUP
(def yaxis-config [{:title {:text "Y Axis: A"}
:height 200}
{:title {:text "Y Axis: B"}
:height 100
:top 300}])
(def series-config [{:name "Series A"
:id "series-a"
:yAxis 0
:data []
:tooltip {"valueDecimals" 2}}
{:name "Series B"
:id "series-b"
:yAxis 0
:data []
:tooltip {"valueDecimals" 2}}
{:name "Series C"
:id "series-c"
:type "arearange"
:lineWidth 0
:fillOpacity 0.3
:zIndex 0
:yAxis 0
:data []
:tooltip {"valueDecimals" 2}}
{:name "Series D"
:id "series-d"
:yAxis 1       ;; ** Only difference I notice
:data []
:shadow true
:tooltip {:valueDecimals 2}}])
(let [chart-options (clj->js {:title {:text "My Title"}
:yAxis yaxis-config
:series series-config})]
(.stockChart js/Highcharts "container" chart-options))

;; ADD A POINT
(let [charts (aget (.-charts js/Highcharts) 0)
series-a (aget (.-series charts) 0)
series-b (aget (.-series charts) 1)
series-c (aget (.-series charts) 2)
series-d (aget (.-series charts) 3)
data-a [1234567 112.5]
data-b [1234567 123.11]
data-c [1234567 155.7]
data-d [1234567 0.257]]
(.addPoint series-a (js/eval (clj->js data-a)) true false)
(.addPoint series-b (js/eval (clj->js data-b)) true false)
(.addPoint series-c (js/eval (clj->js data-c)) true false)
;; ** If I don't make this call, points are successfully added.
;; When adding this call, the JS runtime freezes and redraw stops.
(.addPoint series-d (js/eval (clj->js data-d)) true false))

Answer 1

我想通了。问题似乎在于性能问题。我正在流式传输大量数据，每秒多次滴答。

我通过删除:shadow true(:id "series-d"(来解决此问题。从那里，我的流数据成功呈现，尽管非常慢。

接下来的工作是弄清楚如何"垃圾收集">图形的各个部分，或者只是提高性能。

• 提高大量 数据
• 使用增强渲染数百万个图表点 模块

Answer 2

addPoint方法允许您在具有多个轴的图表上向系列添加点，例如：

var chart = Highcharts.chart('container', {
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175].reverse(),
yAxis: 1
}],
yAxis: [{}, {}]
});
chart.series[1].addPoint(2222);

现场演示：http://jsfiddle.net/BlackLabel/pwer9dho/

API：https://api.highcharts.com/class-reference/Highcharts.Series#addPoint