6

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

  • 渲染非常慢。由于绘制的图表数量（和次数），这是一个性能问题
  • 无法调整底部的时间范围控制。由于控件冻结导致的性能问题
  • 我可以添加一个点，使图形向左移动。但是，我无法使用该新数据点添加标志。请参阅此SO 问题。

在此处输入图像描述

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...
  • 一页上有多个图表
  • 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)}))))
4

2 回答 2

4

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

推荐：带取景器的NVD3折线图

如果它是您想要的股票图表（或任何图表），那么最强大的图表库可能是d3。

有一个 (companion) 库利用 d3，称为nvd3，它提供了可重复使用的图表集，您可能想用 view finder 查看他们的折线图。它不会完全模仿您目前所拥有的，但根据我的经验，不仅性能更好，而且如果您了解一点 JS/d3，那么在引擎盖下进行定制会变得非常容易，而不仅仅是外观上的——此外还有更多有经验的人愿意提供帮助！

于 2014-04-11T13:48:11.600 回答
0

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

两者都基于 D3，因此您可以在直接编辑 D3 的强大功能和预先组装一些东西的便利性之间进行很好的结合。

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

于 2014-01-08T20:22:28.523 回答