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":"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]);

通过每月循环查询来填充高图系列

1 个答案: