使高图成为动态数据驱动

时间:2017-04-12 04:08:54

标签: javascript ajax highcharts bar-chart

我有一个问题,就是将我的高保真栏标记为从我的数据库驱动的动态数据。我想在X轴和高图的系列部分制作动态数据。

这里我有一个从我的数据库输出月份的查询,我想要的是将这些数据放到我的高图类别,我的查询结果是这些JSON OBJECT:

[{"datemonths":"February"},{"datemonths":"April"}]

以下是我所做的或者我试图让它变得动态但听起来像是错误的?

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

以下是样本中要遵循的Highchart数据的格式:

//     Highcharts.chart('container', {
//     chart: {
//         type: 'bar'
//     },
//     title: {
//         text: ''
//     },
//     xAxis: {
//         categories: ['January', 'February', 'March', 'April', 'May', 'June']
//     },
//     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 个答案:

答案 0 :(得分:1)

你不能通过ajax加载类别,你可以做的是将你的json处理成xaxis类别所期望的数组,并创建一个加载你的图表的函数,你将调用ajax成功

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

function loadChart(categories) {
   Highcharts.chart('container', {
     ...
     xAxis: {
       categories: categories
     },
     ...
   });
}

完全小提琴http://jsfiddle.net/gbdfL4ra/1/您必须点击“运行”才能看到结果

由于我无法访问您的网址,因此我必须覆盖发送回您的ajax电话的数据对象