A)私は財務プロジェクトでHighstockチャート作成ライブラリを使用しています。ただし、パフォーマンスの問題で行き詰まります。Highstock の私の作業実装には、 i)グラフに 5 つのグラフがあるii)グラフに複数の線 (および線の種類) iii)グラフ上の点に適用されるラベルiv) 1 秒に約 1 回到着する新しいデータ、点を追加してアニメーション化するグラフを左に。ただし、このセットアップでいくつかの重大な問題が発生しています。
- レンダリングは非常に遅いです。これは、描画されるグラフの量 (および回数) によるパフォーマンスの問題です。
- 下部の時間範囲コントロールを調整できません。コントロールのフリーズによるパフォーマンスの問題
- ポイントを追加して、グラフを左にアニメーション化できます。ただし、その新しいデータ ポイントにフラグを追加することはできません。この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 ページに複数のチャート
- 1 つのビューで複数の重なり合うチャート
- グラフ: 線、面積 (範囲)、ヒストグラム、しきい値線 (上の赤と緑の線を参照)
- 時系列のポイントにフラグを簡単に追加する
- 時系列折れ線グラフにポイントを簡単に追加する
- ポイントとフラグを (同時に) 時系列折れ線グラフに簡単に追加する
D)似たようなことを経験した人はいますか? ハイストックのパフォーマンスを向上させる他の方法はありますか? Google Charts はここでより良い仕事をすることができますか?
ありがとう
Ps。ハイチャートの呼び出しは次のようになります (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)}))))