通過循環我的查詢每個月填充highchart系列

Question

我想從我的高圖填充我的系列數據。我在這裏做的是我得到我的x軸與我的第一個ajax（返回幾個月），它給了我幾個月，每個月我都得到，我循環它每個月我得到我的系列的另一個數據..

這是我的第一個AJAX：它給我的這些輸出：[{"datemonths":"February"},{"datemonths":"April"}]

function getbarxAxis() { 
$.ajax({ 
    url: siteurl+"patients_report/bardata_date", 
    type: "POST", 
    dataType: "JSON", 
    success: function(data) { 
    var categories = new Array(); 
    for (var i in data) { 
     categories.push(data[i]["datemonths"]); 
     getbarseries(data[i]["datemonths"]); 
    } 
    loadChart(categories); 
    } 
}); 
} 

我很迷茫，我怎麼能形成我的一系列的數據和我的數據傳遞給系列，我怎麼能做這些？這裏是我的，這是我第一次阿賈克斯循環內的函數第二碼：這些AJAX它給了我兩個JSON數據的，因爲第一個AJAX給我2個月

第一個循環：[{"clinic_name":"Clinic 1","total_checked_up":"4"}]

第二循環： [{"clinic_name":"Clinic 2","total_checked_up":"1"},{"clinic_name":"Clinic 3","total_checked_up":"1"}]

function getbarseries(month) { 
    $.ajax({ 
     url: siteurl+"patients_report/bardataclinic/"+month, 
     type: "POST", 
     dataType: "JSON", 
     success: function(data) { 
      alert(data); 
     } 
    }); 
} 

這裏就是我想從上面的代碼修改它的功能，現在我設法改變X軸，現在我很困惑我該怎麼做才能同時更改系列默認數據使它基於我的數據庫中的數據動態。 這就是：

function loadChart(categories) { 
    Highcharts.chart('container', { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      categories: categories 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Detailed patient per clinic' 
      } 
     }, 
     legend: { 
      reversed: true 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 3, 2] 
     }, { 
      name: 'Jane', 
      data: [2, 2, 3, 2, 4, 2] 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 1, 3] 
     }] 
    }); 
} 

Answer 1

一個可行的方法是：

1）具有承載引用一個全局變量來highcharts圖表創建：

var chart; 
function loadChart(categories) { 
    chart = Highcharts.chart('container', { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      categories: categories 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Detailed patient per clinic' 
      } 
     }, 
     legend: { 
      reversed: true 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     } 
    }); 
} 

然後，當你做從第二個Ajax調用中加載數據，您可以使用以下API添加系列數據： http://api.highcharts.com/highcharts/Chart.addSeries

（這就是爲什麼你需要的變量引用圖表實例）

// data should be in correct form for highcharts series 
function populate_data(data){ 
    chart.addSeries(data); 
}; 

作爲一個側面說明，你的代碼需要的結構，因爲「鍋爐板」變得難以真正快速管理。

關於如何在不同的呼叫添加一系列的數據舉例： http://jsfiddle.net/gpusx8ze/

var chart; 
function doAxis(axis){ 
    chart = Highcharts.chart('container', { 
     xAxis: { 
      categories:axis 
     }, 

     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     } 
    }); 
} 

function doData(data){ 
chart.addSeries({ 
      data: data 
     }) 
} 


doAxis(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); 
doData([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]); 
doData([144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]);