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 个视图中有多个重叠图表
• 图表：线、面积（范围）、直方图、阈值线（见上面的红线和绿线）
• 在我的时间序列上轻松添加一个标志
• 轻松在我的时间序列折线图中添加一个点
• 轻松地将点和标志（同时）添加到我的时间序列折线图中

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

谢谢

附言。我的 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，那么在引擎盖下进行定制会变得非常容易，而不仅仅是在外观上——而且还有更多有经验并愿意提供帮助的人！

Answer 2

听起来您对替代库持开放态度，所以您看过 RickShaw 或 Cubism 吗？

两者都基于 D3，因此您可以很好地结合直接编辑 D3 的强大功能和预先组装一些内容的便利性。

立体主义尤其专注于扩展到许多数据点。