Highstock和Google Charts在性能方面的比较

6

A) 我正在使用Highstock图表库来完成我的一个财务项目。然而,我遇到了性能问题。我的Highstock实现有i)一个图表中的5个图形ii)一个图形中的多条线(和不同类型的线)iii)应用于图形上点的标签iv)新数据每秒钟到达一次,添加一个点并向左动画化图形。然而,在这种设置下我遇到了一些关键问题:

  • 渲染速度非常慢。这是由于绘制的图形数量(和次数)引起的性能问题
  • 底部时间范围控制无法调整。这是由于控件冻结引起的性能问题
  • 我可以添加一个点,将图形向左动画化。但是,我无法在该新数据点中添加一个flag。请参见此SO问题

enter image description here

B) 我查看了这些其他SO问题(Highstock性能问题如何提高Highcharts性能? ),并尝试了他们的解决方案,但改进非常有限。

: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 ...
  • 一个页面上有多个图表
  • 一个视图中有多个重叠的图表
  • 用于:线条、区域(范围)、直方图、阈值线(请参见上面的红色和绿色线条)的图表
  • 轻松地向我的时间序列添加标记
  • 轻松地向我的时间序列线图添加点
  • 轻松地向我的时间序列线图同时添加点和标记

D) 有人经历过类似的事情吗? 有其他方法可以提高我的Highstock性能吗? Google Charts在这里能做得更好吗?

谢谢

附:我的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)}))))
2个回答

4
根据我的经验,Google绘图库的性能比Highcharts更好。但是如果没有提供更多标记或配置/数据的副本,难以确定导致性能变慢的具体问题。
建议使用NVD3 带视图查找器的折线图。如果你需要股票图表(或任何图表),可能最强大的制图库是d3。有一个称为nvd3的(伴侣)库,它提供了一组可重用的图形,你可以看一下它们的带视图查找器的折线图。虽然它不会完全模仿你当前所拥有的内容,但根据我的经验,它的性能更好,而且如果你懂一点JS/d3,那么它在底层不仅仅是在表面上进行自定义,而且有很多人拥有经验并愿意帮助!

0

听起来你对替代库持开放态度,那么你看过RickShawCubism吗?

两者都基于D3,因此你可以在直接编辑D3的强大功能和拥有一些预装内容的便利性之间取得良好的平衡。

特别是Cubism专注于扩展到许多数据点。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接