Highstock与谷歌排行榜的表现

Question

A)我正在使用 Highstock图表库来进行我的金融项目.但是,我陷入了性能问题的困境.我在Highstock的工作实现有 i)图表中的5个图表 ii)图表中的多行(和行类型) iii)应用于图表上的点的标签 iv)每秒一次到达的新数据,添加点和动画向左图.但是,我在使用此设置时遇到了一些关键问题:

• 渲染非常慢.由于绘制图形的数量(和次数),这是一个性能问题
• 无法调整底部的时间范围控制.由于控制冻结导致的性能问题
• 我可以添加一个点,向左移动图形.但是,我无法添加带有该新数据点的标志.看到这个SO问题.

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问题的简单解决方案.这是一个很棒的图书馆.但我正在查看谷歌图表API,看看它是否能满足这些要点.

• 鉴于以下所有交互,Google Charts API的性能超过了Highstock ......
• 一页上有多个图表
• 1个视图中的多个重叠图表
• 图表:线,面积(范围),直方图,阈值线(见红线和绿线)
• 轻松添加标记到我的时间序列中的一个点
• 轻松将点添加到我的时间序列折线图中
• 轻松地将点和标志(同时)添加到我的时间序列折线图中

D)有没有人经历过类似的事情？还有其他方法可以改善我的高品质性能吗？Google Charts可以在这里做得更好吗？

谢谢

PS.我的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

听起来您对其他库持开放态度，那么您看过RickShaw或Cubism吗？

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

Cubism 特别注重扩展到许多数据点。