.addPoint ke beberapa yAxis, membekukan browser

Saya memiliki bagan dengan beberapa seri yang ditambahkan ke lebih dari 1 yAxis. Setiap kali saya mencoba memanggil .addPoint ke apa pun selain yAxis pertama, runtime JS tab browser itu terhenti.

Jika saya menambahkan seri saya ke yAxis pertama, poin berhasil ditambahkan ke grafik. Di bawah ini kira-kira kode saya (dalam Clojurescript). Apakah ada sesuatu yang perlu saya lakukan untuk memfasilitasi menggambar ke beberapa sumbu y?

;; CHART SETUP
(def yaxis-config [{:title {:text "Y Axis: A"}
                    :height 200}

                   {:title {:text "Y Axis: B"}
                    :height 100
                    :top 300}])

(def series-config [{:name "Series A"
                     :id "series-a"
                     :yAxis 0
                     :data []
                     :tooltip {"valueDecimals" 2}}

                    {:name "Series B"
                     :id "series-b"
                     :yAxis 0
                     :data []
                     :tooltip {"valueDecimals" 2}}

                    {:name "Series C"
                     :id "series-c"
                     :type "arearange"
                     :lineWidth 0
                     :fillOpacity 0.3
                     :zIndex 0
                     :yAxis 0
                     :data []
                     :tooltip {"valueDecimals" 2}}

                    {:name "Series D"
                     :id "series-d"
                     :yAxis 1       ;; ** Only difference I notice
                     :data []
                     :shadow true
                     :tooltip {:valueDecimals 2}}])

(let [chart-options (clj->js {:title {:text "My Title"}
                              :yAxis yaxis-config
                              :series series-config})]

  (.stockChart js/Highcharts "container" chart-options))


;; ADD A POINT
(let [charts (aget (.-charts js/Highcharts) 0)

      series-a (aget (.-series charts) 0)
      series-b (aget (.-series charts) 1)
      series-c (aget (.-series charts) 2)
      series-d (aget (.-series charts) 3)

      data-a [1234567 112.5]
      data-b [1234567 123.11]
      data-c [1234567 155.7]
      data-d [1234567 0.257]]

  (.addPoint series-a (js/eval (clj->js data-a)) true false)
  (.addPoint series-b (js/eval (clj->js data-b)) true false)
  (.addPoint series-c (js/eval (clj->js data-c)) true false)

  ;; ** If I don't make this call, points are successfully added.
  ;; When adding this call, the JS runtime freezes and redraw stops.
  (.addPoint series-d (js/eval (clj->js data-d)) true false))

javascript highcharts
person Nutritioustim    schedule 17.09.2018    source sumber
comment
Hai Nutritioustim, saya menyiapkan dan menguji contoh ini: jsfiddle.net/BlackLabel/pwer9dho dan semuanya berfungsi dengan baik .   -  person ppotaczek    schedule 17.09.2018
comment
@ppotaczek Luar biasa. Terima kasih sobat. Teladan Anda tepat. Saya hanya perlu mengelola kinerja dengan lebih baik.   -  person Nutritioustim    schedule 18.09.2018
comment
Saya senang bisa membantu, jangan ragu untuk bertanya jika Anda memiliki masalah dengan Highcharts.   -  person ppotaczek    schedule 18.09.2018

Jawaban (2)


arrow_upward
0
arrow_downward

Saya menemukan jawabannya. Masalahnya tampaknya adalah kinerja. Saya mengalirkan data dalam jumlah besar, beberapa kali per detik.

Saya memperbaiki masalah ini dengan menghapus :shadow true (di :id "series-d"). Dari sana, data streaming saya berhasil dirender, meskipun sangat lambat.

Urutan bisnis berikutnya adalah mencari tahu cara "mengumpulkan sampah" bagian dari grafik, atau sekadar meningkatkan kinerja.

person Nutritioustim    schedule 18.09.2018

arrow_upward
0
arrow_downward

Metode addPoint memungkinkan Anda menambahkan titik ke rangkaian pada grafik dengan banyak sumbu, misalnya dengan cara ini:

var chart = Highcharts.chart('container', {
    series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175].reverse(),
        yAxis: 1

    }],
    yAxis: [{}, {}]
});

chart.series[1].addPoint(2222);

Demo langsung: http://jsfiddle.net/BlackLabel/pwer9dho/

API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

person ppotaczek    schedule 18.09.2018
comment
Benar. Contoh saya memiliki banyak sumbu. Maaf, ini ada dalam Clojuerscript, jadi agak asing. Jadi saya bisa menjalankan fungsi seperti (.addPoint mySeries myData true false), dengan lebih sedikit jeda, jika saya menghilangkan opsi untuk bayangan. - person Nutritioustim; 21.09.2018