Highcharts系列和類別不會從ajax請求動態添加

我正在研究highchart.I遇到了一個問題，我動態加載的類別數據和系列數據沒有顯示出來。這是我的代碼。Highcharts系列和類別不會從ajax請求動態添加

function loadChart() {    
     var categories = [];  
     var trend_series = []; 
     $.ajax({ 
      type:'POST', 
     url : '/trends.php', 
     dataType: 'json', 
     async : 'false', 
      data: { date: d, item_name: item }, 
     success: function(data) { 
      $.each(data, function(key, val) { 
      categories.push(key); 
      trend_series.push(parseFloat(val)); 
      }); 
      }, 
     error: function(data) {    
      //alert(data['responseText']); 
     } 
     }); 

     $(function() { 
     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'line'      
       },       
      xAxis: { 
       categories: {} 
      }, 

       series: [{ 
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
      }] 
      }); 

      chart.xAxis[0].setCategories(categories); 
      chart.addSeries({ 
      name: 'App Summary', 
      data: trend_series  
      }); 
     }); 
     }

我從另一個文件中調用loadChart()。

我注意到的一個主要問題是類別和trend_series（這些是數組）在highchart函數內是空的。但它在ajax函數調用中不是空的。我如何將這些值傳遞給highchart函數或者是否有任何其他方法來實現這一點。

來源

2013-07-17 Anish

您正在修改類別和數據，但圖表無法被通知。您需要再次執行categories.push（），然後再次重做chart.xAxis[0].setCategories(categories,true)，並且在ajax調用中您的成功函數中的數據chart.series[0].setData(trend_series,true)也一樣。的true選項觸發chart.redraw（）

來源

2013-07-17 08:50:11

謝謝您的回覆！我已經嘗試過你的解決方案。在ajax成功函數裏面，我添加了這兩行代碼var chart = new Highcharts.Chart（）; \t \t \t \t chart.xAxis [0] .setCategories（categories，true）; chart.series [0] .setData（trend_series，true）; ..我已經把類別值推入類別數組。在這之後，它也不能正常工作。讓我知道這是不是正確的。 – Anish

你可以爲chart，categories和trend_series做一些console.log嗎？你在上面的例子中聲明的東西的方式似乎有點不正確，因爲你在函數內部有一個jQuery初始化調用。通常情況相反。一個jsfiddle會很好。 –

當我做一個console.log（類別）裏面的ajax函數，它給出了結果（我的意思是數值）。但是，當我在highchart函數內執行相同的console.log（類別）時，它顯示的是空數組。有沒有辦法將該變量傳遞給highchart函數。我已經將該變量聲明爲全局變量。 – Anish

我結束了，即使它是有點怪異該解決方案，

我感動enitre highchart功能到另一個功能。在ajax成功函數上，我打電話給下一個函數renderChart()。代碼如下。

function loadChart() {    
     categories = [];  
     trend_series = []; 

     $.ajax({ 
      type:'POST', 
     url : '/trends.php', 
     dataType: 'json', 
     async : 'false', 
      data: { date: d, item_name: item }, 
     success: function(data) { 
      $.each(data, function(key, val) { 
      categories.push(key); 
      trend_series.push(parseFloat(val)); 
      }); 
      renderChart(categories,trend_series); 
      }, 
     error: function(data) {    
      //alert(data['responseText']); 
     } 
     }); 
     }

要加載highchart

 function renderChart(categories,trend_series){ 
     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'line'      
       },       
      xAxis: { 
       categories: {} 
      }, 

       series: {} 
      }] 
      }); 

      chart.xAxis[0].setCategories(categories); 
      chart.addSeries({ 
      name: 'App Summary', 
      data: trend_series  
      }); 
    }

來源

2013-07-17 09:51:19 Anish

是的，這是如何工作的 - 當數據來自AJAX時 - 創建圖表。當創建圖表而不是使用setCategories和addSeries時，您還可以升級代碼 - 使用：'categories：categories'和serieS：[{name：'app Summary'，data：trend_series}]''。 –

會更好，如果你使用

$.ajax({ 
      type:'POST', 
     url : '/trends.php', 
     dataType: 'json', 
     async : 'false', 
      data: { date: d, item_name: item }, 
     success: function(data) { 

var options = { 
    chart: { 
       renderTo: 'container', 
       type: 'line'      
       },       
      xAxis: { 
       categories: [] 
      }, 
    series:{ 
data:[] 
} 

} 

      $.each(data, function(key, val) { 
      options.xAxis.categories.push(key); 
      options.series.data.push(parseFloat(val)); 
}); 

var chart = new Highcharts.Chart(options); 

      }, 
     error: function(data) {    
      //alert(data['responseText']); 
     } 
     });

來源

2013-07-17 11:10:50

Highcharts系列和類別不會從ajax請求動態添加

回答

相關問題