Highcharts列明细

Question

从我的PHP文件，我的阵列打印的东西这样的：

Array 
(
[2011] => Array 
    (
     [name] => 2011 
     [total] => 963 
     [drilldown] => true 
    ) 

[2012] => Array 
    (
     [name] => 2012 
     [total] => 1997 
     [drilldown] => true 
    ) 

[2013] => Array 
    (
     [name] => 2013 
     [total] => 1188 
     [drilldown] => true 
    ) 

）

这是json_encode：

{"2011":{"name":2011,"total":963,"drilldown":"true"}, 
"2012":{"name":2012,"total":1997,"drilldown":"true"}, 
"2013":{"name":2013,"total":1188,"drilldown":"true"}} 

从这个工作环节：highcharts/drilldown

data: [{ 
      name: 'Animals', 
      y: 5, 
      drilldown: true 
     }, { 
      name: 'Fruits', 
      y: 2, 
      drilldown: true 
     }, { 
      name: 'Cars', 
      y: 4, 
      drilldown: true 
     }] 

我想用我的json改变这个部分。

Answer 1

我做了一个JSFIDDLE demo。

你需要做的是PHP数组的JSON编码字符串赋值给这样一个JavaScript变量：

var my_data = <?php echo json_encode($php_array); ?> 

这个变量my_data会有像值：

var my_data = { 
     "2011":{"name":2011,"total":963,"drilldown":"true"}, 
     "2012":{"name":2012,"total":1997,"drilldown":"true"}, 
     "2013":{"name":2013,"total":1188,"drilldown":"true"} 
    }; 

现在这个对象需要被结构化为这种格式，以便高层图可以用它作为绘制图的值的数据源。这是可以做到这样的：

var data_array = []; 
$.each(my_data, function(key, value){ 

     var total_value = value.total; 
     delete value.total;//remove the attribute total 
     value.y = total_value;//add a new attribute "y" for plotting values on y-axis 
     data_array.push(value); 
    }); 

这data_array后，将有结构一样：

data_array = [ 
     {"name":2011,"y":963,"drilldown":"true"},//note we have removed attribute "total" with "y" 
     {"name":2012,"y":1997,"drilldown":"true"}, 
     {"name":2013,"y":1188,"drilldown":"true"} 
    ]; 

现在这个data_array可以作为数据源被传递到图表，同时初始化是这样的：

// Create the chart 
    $('#container').highcharts({ 
.... 
..... 
series: [{ 
      name: 'Things', 
      colorByPoint: true, 
      data:data_array//put the data_array here 
.... 
.. 

你就完成了！

下面是完整的代码：

$(function() {  
    var data_array = []; 
    //assign the json encoded string of PHP array here like: 
    //var my_data = <?php echo json_encode($php_array); ?> 
    var my_data = { 
     "2011":{"name":2011,"total":963,"drilldown":"true"}, 
     "2012":{"name":2012,"total":1997,"drilldown":"true"}, 
     "2013":{"name":2013,"total":1188,"drilldown":"true"} 
    }; 

    $.each(my_data, function(key, value){ 
     //console.log("key = "+key); 
     //console.log("value="); 
     //console.log(value); 
     var total_value = value.total; 
     delete value.total;//remove the attribute total 
     value.y = total_value;//add a new attribute "y" for plotting values on y-axis 
     data_array.push(value); 
    }); 

    //console.log("data_array = "); 
    //console.log(data_array); 


    // Create the chart 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      events: { 
       drilldown: function (e) { 
        if (!e.seriesOptions) { 

         var chart = this, 
          drilldowns = { 
           'Animals': { 
            name: 'Animals', 
            data: [ 
             ['Cows', 2], 
             ['Sheep', 3] 
            ] 
           }, 
           'Fruits': { 
            name: 'Fruits', 
            data: [ 
             ['Apples', 5], 
             ['Oranges', 7], 
             ['Bananas', 2] 
            ] 
           }, 
           'Cars': { 
            name: 'Cars', 
            data: [ 
             ['Toyota', 1], 
             ['Volkswagen', 2], 
             ['Opel', 5] 
            ] 
           } 
          }, 
          series = drilldowns[e.point.name]; 

         // Show the loading label 
         chart.showLoading('Simulating Ajax ...'); 

         setTimeout(function() { 
          chart.hideLoading(); 
          chart.addSeriesAsDrilldown(e.point, series); 
         }, 1000); 
        } 

       } 
      } 
     }, 
     title: { 
      text: 'Async drilldown' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 

     legend: { 
      enabled: false 
     }, 

     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
       } 
      } 
     }, 

     series: [{ 
      name: 'Things', 
      colorByPoint: true, 
      data:data_array 

     }], 

     drilldown: { 
      series: [] 
     } 
    }) 
});