我想从 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]
}]
});
}
一种可能的方法是:
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]);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句