Highcharts setData不能使用php，json點擊按鈕

我正在學習highcharts，並陷入了使用php，json中的新數據更新圖表的情況。我通過用數據創建一個單獨的圖形來驗證新數據是否處於正確的JSON格式。Highcharts setData不能使用php，json點擊按鈕

下面是我的代碼：

var my_chart; 

    var options = { 
    chart: { 
     renderTo: 'container', 
     type: 'column', 
     marginRight: 130, 
     marginBottom: 75, 
    }, 
    title: { 
     text: 'Man Weeks Allocation Region Wise', 
     x: -20 //center 
    }, 
    plotOptions: { 
      column: { 
       dataLabels: { 
        enabled: true 
       }, 
       enableMouseTracking: false 
      } 
     }, 
    subtitle: { 
     text: 'True that', 
     x: -20 
    }, 
    xAxis: { 
     categories: [] 
    }, 
    yAxis: { 
     title: { 
      text: 'Count' 
     }, 
     gridLineColor: '#197F07', 
     gridLineWidth: 0, 
     lineWidth:1, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     formatter: function() { 
     return '<b>'+ this.series.name +'</b><br/>'+ 
     this.x +': '+ this.y; 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -10, 
     y: 100, 
     borderWidth: 0 
    }, 
    credits: { 
     enabled: false 
     }, 

    series: [] 
    } 


$(document).ready(function() { 
    $.getJSON("getData.php", function(json) { 
     console.log(json[0]); 
     console.log(json[1]); 
    options.xAxis.categories = json[0]['data']; 
    options.series[0] = json[1]; 
    my_chart = new Highcharts.Chart(options); 
    }); 
}); 


$("#button1").click(function() { 
    $.getJSON("getNewData.php", function(data) { 
     console.log(data[0]); 
     console.log(data[1]);  
     my_chart.series[0].setData(data[1]); 
     my_chart.xAxis[0].setCategories(data[0]['data']); 
    }); 
});

當我按一下按鈕，它打印在控制檯上正確的數據，但不更新圖表，圖表較早的數據也消失了..

但以下工作，如果我硬編碼的數據：

$("#button1").click(function() { 
    $.getJSON("getNewData.php", function(data) { 
     console.log(data[0]); 
     console.log(data[1]); 
     my_chart.series[0].setData([1,2,3,4,5]); 
     my_chart.xAxis[0].setCategories(['A','B','C','D','E']); 
    }); 
});

有什麼我缺少動態更改數據？

如果我在文檔就緒功能中使用相同的按鈕而不是按鈕單擊功能，我可以保證JSON數據格式正確，如圖所示。

來源

2017-05-16 milan kumar

如果你硬編碼數據，它的工作原理，然後它無法與JSON的工作，那麼它必須是與JSON的東西 - 確保你從JSON的數據數組是一個數組數組 - 不是一個字符串數組 – morganfree

沒有看到輸出你返回的JSON，很難說很多... – jlbriggs

這裏是json數據： [{「name」：「city」，「data」：[「多個城市」，「IrvineDallas」，「Seattle」，「歐文」，「巴西」，「新澤西」，「莫斯科」，「亞特蘭大」，「約翰內斯堡」，「達拉斯」，「巴爾的摩」，「印度」，「Syracause」，「紐約」，「邁阿密」，「芝加哥」，「USA」，「泰國」]}，{ 「名稱」：「值」，「數據」：[12.5,6,3.3,6.3,8.6,4.9,3.8,3.3,4.8 ，4.8,3.7,14.3,1.8,5.7,3.8,1.8,4,2.8,3.8]}] –

設置xAxis.categories和系列選項並再次創建圖表工作正常。

$("#city").click(function() { 
    $.getJSON("getNewData.php", function(data) { 
     console.log(data[0]); 
     console.log(data[1]); 
     options.xAxis.categories = data[0]['data']; 
     options.series[0] = data[1]; 
     my_chart = new Highcharts.Chart(options); 
    }); 
});

是否有任何其他方式使用setData和setCategories更新圖表？

來源

2017-05-16 08:43:48

Highcharts setData不能使用php，json點擊按鈕

回答

相關問題