javascript - 通过每月循环查询来填充 highchart 系列

Question

我想从 highchart 填充我的系列数据。我在这里做的是我用我的第一个ajax(返回几个月)获取我的x轴，它给了我几个月，每个月我都得到，我每个月循环它我必须得到我的系列的另一个数据..

这是我的第一个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 循环内函数的第二个代码:在这些 ajax 中，它给了我两个 JSON 数据，因为第一个 ajax 给了我两个月的时间

第一个循环:[{"clinic_name":"Clinic 1","total_checked_up":"4"}]

第二个循环:[{"clinic_name":"诊所 2","total_checked_up":"1"},{"clinic_name":"诊所 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]);