performance - Highstock 与 Google 图表的性能对比

Question

A) 我正在使用 Highstock我的一个金融项目的图表库。但是，我陷入了性能问题。我对 Highstock 的工作实现有 i) 图表中的 5 个图形 ii) 图形中的多条线(和线型) iii) 应用于图形上的点的标签 iv) 新数据大约每秒到达一次，添加一个点并向左移动图形。但是，我在使用此设置时遇到了一些关键问题:

渲染非常慢。这是由于绘制图形的数量(和次数)而导致的性能问题

无法调整底部的时间范围控制。由于控件卡住而导致的性能问题

我可以添加一个点，使图形向左动画。但是，我无法使用该新数据点添加标志。看到这个 SO issue .

B) 我已经检查了这些其他 SO 问题( Highstock Performance Issue 、 Highcharts Performance Enhancement Method? )，并尝试了他们的解决方案，但改进非常有限:

:turboThreshold 50 ;; tick-list length will be a max of 100
:shadow false
:marker {:enabled false}
:plotOptions{:series {:enableMouseTracking false}}

C) 我没有看到这些 Highstock 问题的简单解决方案。这是一个很棒的图书馆。但我在看 Google Charts API ，看看它是否能满足这些点。

Google Charts API 的性能超过 Highstock... 鉴于以下所有互动

一页上有多个图表

1 个 View 中的多个重叠图表

图表:线、面积(范围)、直方图、阈值线(见上面的红线和绿线)

轻松地向我的时间序列中的某个点添加标志

轻松地在我的时间序列折线图中添加一个点

轻松地向我的时间序列折线图添加一个点和标志(同时)

D) 有没有人经历过类似的事情？还有其他方法可以提高我的高库存性能吗？谷歌图表可以在这里做得更好吗？

谢谢

附言。我的 highcharts 调用看起来像这样(Clojurescript 代码):

(defn chart-fill [selector dataList signal-map strategy-map label]

  (-> ($ selector)
      (.highcharts "StockChart" (clj->js
                                 {:names [label "Bolling Band" "Simple Moving Average" "Exponential Moving Average"]
                                  :rangeSelector {:selected 11}
                                  :title {:text label}
                                  :chart {:zoomType "x"}
                                  :navigator {:adaptToUpdatedData true}
                                  :yAxis [{
                                           :title {:text "Technical Analysis"}
                                           :height 200
                                           :shadow false
                                           :turboThreshold 50
                                           :marker {:enabled false}}
                                          {
                                           :title {:text "MACD / Signal"}
                                           :height 100
                                           :top 300
                                           :offset 0
                                           :lineWidth 2
                                           :turboThreshold 50
                                           :shadow false
                                           :marker {:enabled false}
                                           :plotOptions{:series {:enableMouseTracking false}}}
                                          {
                                           :title {:text "MACD Histog"}
                                           :height 100
                                           :top 400
                                           :offset 0
                                           :lineWidth 2
                                           :turboThreshold 50
                                           :shadow false
                                           :marker {:enabled false}
                                           :plotOptions{:series {:enableMouseTracking false}}}
                                          {
                                           :title {:text "Stochastic Osc"}
                                           :height 100
                                           :top 500
                                           :offset 0
                                           :lineWidth 2
                                           :max 1
                                           :min 0
                                           :turboThreshold 50
                                           :shadow false
                                           :marker {:enabled false}
                                           :plotOptions{:series {:enableMouseTracking false}}
                                           :plotLines [{
                                                        :value 0.75
                                                        :color "red"
                                                        :width 1
                                                        :dashStyle "longdash"
                                                        :label {:text "Overbought"}}
                                                       {
                                                        :value 0.25
                                                        :color "green"
                                                        :width 1
                                                        :dashStyle "longdash"
                                                        :label {:text "Oversold"}}]}
                                          {
                                           :title {:text "OBV"}
                                           :height 100
                                           :top 600
                                           :offset 0
                                           :lineWidth 2
                                           :turboThreshold 50
                                           :shadow false
                                           :marker {:enabled false}
                                           :plotOptions{:series {:enableMouseTracking false}}}]

                                  :series (build-graph-series-data dataList signal-map strategy-map)}))))

Answer 1

根据我的经验，Google 图表库的性能比 Highcharts 好，但是如果没有提供更多标记或配置/数据的副本，则很难隔离可能导致性能下降的特定问题。

推荐:NVD3 line chart with view finder

如果它是您所追求的股票图表(或任何图表)，那么目前最强大的图表库可能是 d3 .

有一个(配套)库利用 d3，名为 nvd3它提供了一组可重用的图表，你可能想看看他们的 line chart with view finder .它不会完全模仿你目前拥有的东西，但根据我的经验，不仅性能更好，而且如果你了解一点 JS/d3，那么在引擎盖下进行定制会变得非常容易，而不仅仅是在外观上——此外还有更多有经验的人愿意提供帮助!