.addPoint ไปที่หลาย yAxis หยุดเบราว์เซอร์

ฉันมีแผนภูมิที่มี series หลายรายการถูกเพิ่มลงใน yAxis เมื่อใดก็ตามที่ฉันพยายามโทร .addPoint ไปยังสิ่งอื่นนอกเหนือจาก yAxis แรก รันไทม์ JS ของแท็บเบราว์เซอร์นั้นจะหยุดทำงาน

ถ้าฉันเพิ่มอนุกรมของฉันไปที่ yAxis แรก คะแนนจะถูกเพิ่มลงในกราฟได้สำเร็จ ด้านล่างประมาณรหัสของฉัน (ใน Clojurescript) มีอะไรที่ชัดเจนที่ฉันต้องทำเพื่ออำนวยความสะดวกในการวาดไปยังหลาย yAxis หรือไม่?

;; 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))

person Nutritioustim    schedule 17.09.2018    source แหล่งที่มา
comment
สวัสดี Nutritioustim ฉันได้เตรียมและทดสอบตัวอย่างนี้: jsfiddle.net/BlackLabel/pwer9dho และทุกอย่างทำงานได้ดี .   -  person ppotaczek    schedule 17.09.2018
comment
@ppotaczek สุดยอดเลย ขอบคุณเพื่อน. ตัวอย่างของคุณตรงประเด็น ฉันแค่ต้องจัดการประสิทธิภาพให้ดียิ่งขึ้น   -  person Nutritioustim    schedule 18.09.2018
comment
ฉันดีใจที่สามารถช่วยได้ โปรดสอบถามหากคุณมีปัญหาใดๆ กับ Highcharts หรือไม่   -  person ppotaczek    schedule 18.09.2018


คำตอบ (2)


ฉันคิดออกแล้ว ดูเหมือนว่าปัญหาจะเป็นหนึ่งในประสิทธิภาพ ฉันกำลังสตรีมข้อมูลจำนวนมาก หลายครั้งต่อวินาที

ฉันแก้ไขปัญหานี้โดยการลบ :shadow true (ใน :id "series-d") จากนั้นข้อมูลที่สตรีมของฉันก็แสดงผลได้สำเร็จแม้ว่าจะช้ามากก็ตาม

ลำดับต่อไปของธุรกิจคือการหาวิธี "เก็บขยะ" ส่วนของกราฟ หรือเพียงเพิ่มประสิทธิภาพ

person Nutritioustim    schedule 18.09.2018

เมธอด addPoint ช่วยให้คุณสามารถเพิ่มจุดไปยังอนุกรมบนแผนภูมิที่มีหลายแกนได้ เช่น ด้วยวิธีนี้:

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);

การสาธิตสด: http://jsfiddle.net/BlackLabel/pwer9dho/

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

person ppotaczek    schedule 18.09.2018
comment
ถูกต้อง. ตัวอย่างของฉันมีหลายแกน ขออภัยมันอยู่ใน Clojuerscript ดังนั้นจึงไม่ค่อยคุ้นเคย ดังนั้นฉันจึงสามารถเรียกใช้ฟังก์ชันเช่น (.addPoint mySeries myData true false) โดยมีความล่าช้าน้อยลง หากฉันละเว้นตัวเลือกสำหรับเงา - person Nutritioustim; 21.09.2018