高圖中的series.data問題

我在調用幻燈片操作之後使用滑塊重繪圖表的柱形圖。我將每個數據數組存儲在一個JavaScript對象中，並根據滑塊選項呈現圖表。分配第一個滑塊選項的初始值後，圖表正確呈現，但是當我滑回到第一個位置時，圖表不會呈現。奇怪的部分是當我將初始值分配給一個單獨的變量，並且數據選項被分配了這個變量時，圖表在每個位置都正確呈現。下面的代碼：高圖中的series.data問題

var data = { 
         "jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0], 
         "feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25], 
         "mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15], 
         "apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30], 
         "may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43], 
         "jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57], 
         "jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312], 
         "aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30], 
         "sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30], 
         "oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30], 
         "nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30], 
         "dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30] 
        }; 
var someData = [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0]; 

var chart = new Highcharts.chart({ 
        chart: { 
         renderTo: 'container', 
         type: 'column', 
         marginTop: 50, 
         marginLeft: 100, 
         marginBottom: 50 
        }, 
        title: false, 

        exporting: {enabled: false}, 
        xAxis: { 
         crosshair: true, 
         tickColor: '#7F7F7F', 
         lineColor: '#7F7F7F', 
         tickWidth: 0, 
         labels: { 
          step: 5 
         }, 
         title: { 
          text: 'x-axis', 
          align: "left", 
          x: -10, 
          rotation: 0, 
          style: { 
           "font-size" : "15px" 
          } 
         } 
        }, 
        yAxis: { 
         min: 0, 
         title: { 
          text: 'y-axis', 
          align: 'high', 
          rotation: 0, 
          y: -10, 
          offset: 0, 
          style: { 
           "font-size" : "15px" 
          } 
         }, 
         gridLineColor: 'transparent', 
         lineColor: '#7F7F7F', 
         lineWidth: 1, 
         tickWidth: 1, 
         tickColor: '#7F7F7F', 
         gridLineWidth: 0, 
         minorGridLineWidth: 0, 
         labels: { 
          step: 2, 
          formatter: function(){ 
           if(this.value > 999) 
            return Math.round(this.value/1000) + 'k'; 
           return this.value; 
          } 
         } 
        }, 
        tooltip: { 
         enabled: false 
        }, 
        plotOptions: { 
         column: { 
          pointPadding: 0.2, 
          borderWidth: 0 
         }, 
         series: { 
          colorByPoint: true 
         } 
        }, 
        series: [{ 
         showInLegend: false, 
         data: someData 
        }], 
        credits: false 
       }); 

$('#slider_bar').on("slide", function() { 
        chart.series[0].setData(data[document.getElementById('value').innerHTML]); 
});

滑塊的初始位置是在一月和圖表呈現正確時我滑回一月我想知道爲什麼當我分配series.data爲圖表將不會呈現：

data: data.jan

有什麼建議？

來源

2017-01-25 wolfsbane

Highchart series.data需要一個鍵值對，或陣列狀

[[x1,y1],[x2,y2]]

或

{ 

y: [x1,x2] 
}

現在，當你做data = data.jan Highchart無法找到Y值，因爲數組data.jan是一個簡單的數組

來源

2017-01-25 11:49:19

someData與data.jan有什麼不同？ – wolfsbane

發現解決方案：

而不是寫入

data: data.jan

寫入

data: data.jan.slice()

切片功能並不直接返回數組的引用，而不是將其返回該數組的一個副本。我仍然想知道爲什麼我們需要首先使用切片功能，對於這種特殊的情況，但它的工作原理。

來源

2017-01-25 13:46:01 wolfsbane

高圖中的series.data問題

回答

相關問題