Highcharts向下鑽取圖表CodeIgniter

Question

我正在開發CodeIgniter框架中的PHP項目。此應用程序包含許多動態創建的圖形。我與ronan-gloo highcharts library合作非常成功。下面是我的生成圖形代碼...

$this -> load -> library ('Highchart'); 
$chart = new Highchart (); 

$chart -> chart -> renderTo = "divid"; 
$chart -> title -> text = "chart Title"; 
$chart -> xAxis -> categories = $xaxis; 

$chart -> tooltip -> formatter = new HighchartJsExpr ("function() { 
        var s; 
        if (this.point.name) { // the pie chart 
         s = ''+ 
         this.point.name +': '+ this.y; 
        } else { 
         s = '<b>'+ this.series.name +'</b><br/><i>' + this.x +'</i>: <b>'+ this.y + '%</b>'; 
        } 
        return s; }"); 

$chart -> series [ ] = array (
    'type' => "column" , 
    'name' => "%age" , 
    'data' => $yaxis , 
    'color' => '#CC004B' , 
    'showInLegend' => TRUE , 
    'dataLabels' => array (
     'enabled' => TRUE , 
     'color' => '#CC004B' , 
     'style' => array (
      'fontSize' => '10px' , 
      'verticalalign' => 'bottom' 
     ) 
    ) 
); 

foreach ($chart->getScripts() as $script) { 
    echo '<script type="text/javascript" src="' . $script . '"></script>'; 
} 

echo "<script src='" . base_url () . "assets/js/jquery.cookie.js'></script>"; 
echo "<script type='text/javascript' src='" . base_url () . "assets/highcharts/js/exporting.js'></script>"; 
echo "<div id='divid'></div>"; 
echo "<script type='text/javascript'>" . $chart -> render ("chart1") . "</script>"; 

，這是幫助我更大的延伸到創建圖形，但是，Highcharts有很大的向下鑽取功能（High Charts Drilldown demo），這也是我希望在實現我的項目。

該演示建議創建JavaScript對象，該對象包含用於創建圖表的深入數據（​​）。但我怎麼能在PHP Codeigniter的JavaScript寫在飛行...

請幫助！

Answer 1

我能夠處理上述問題。下面是我使用的代碼...

$this -> load -> library ('Highchart'); 

     $chart = new Highchart (); 

     $chart -> chart -> renderTo = "chartcontainer"; 
     $chart -> title -> text = "Chart Title"; 
     $chart -> chart -> type = "column"; 
     $chart -> subtitle -> text = "Click the columns to view Drilldown. Click again to view main chart."; 
     $chart -> xAxis -> categories = $xaxis; 
     $chart -> yAxis -> title -> text = "%age"; 
     $chart -> chart -> plotShadow = TRUE; 
     $chart -> chart -> plotBorderWidth = 1; 

     $chart -> chart -> plotBackgroundColor = "#F0F0F0"; 

     $pcolumn = $chart -> plotOptions -> column; 
     $pcolumn -> cursor = "pointer"; 
     $xaxisjson = json_encode ($xaxis); 
     $pcolumn -> point -> events -> click = new HighchartJsExpr ("function() { 
           var drilldown = this.drilldown; 
           if (drilldown) { // drill down 
            setChart(drilldown.name, drilldown.categories, drilldown.data, '#FA7070'); 
           } else { // restore 
            setChart('Repeat %age', $xaxisjson, $drilldowndata); 
           } 

           function setChart(name, categories, data, color) { 
            chart2.xAxis[0].setCategories(categories, false); 
            chart2.series[0].remove(false); 
            chart2.addSeries({ 
             name: name, 
             data: data, 
             color: color || '#7070FA' 
            }, false); 
            chart2.redraw(); 
           } 
          }"); 

     $pcolumn -> dataLabels = array (
      "enabled" => true , 
      "style" => array ("fontWeight" => "bold") , 
      "formatter" => new HighchartJsExpr ("function() { 
          return this.y +'%'; 
         }") 
     ); 

     $chart -> tooltip -> formatter = new HighchartJsExpr ("function() { 
        var point = this.point, 
         s = this.x +':<b>'+ this.y +'%</b> Repeat E-Mails<br/>'; 
        if (point.drilldown) { 
         s += 'Click to view '+ point.category +'\'s drilldown data'; 
        } else { 
         s += 'Click to return to main graph'; 
        } 
        return s; 
       }"); 

     $chart -> series [ ] = array (
      "name" => "Series Name" , 
      "data" => $drilldowndata [ "data" ] 
     ); 

     foreach ($chart->getScripts() as $script) { 
      echo '<script type="text/javascript" src="' . $script . '"></script>'; 
     } 

     echo "<script src='" . base_url () . "assets/js/jquery.cookie.js'></script>"; 
     echo "<script type='text/javascript' src='" . base_url () . "assets/highcharts/js/exporting.js'></script>"; 
     echo "<div id='chartcontainer'></div>"; 
     echo "<script type='text/javascript'>" . $chart -> render ("chart2") . "</script>"; 

和數組$鑽在下面的格式：

Array 
(
    [data] => Array 
     (
      [0] => Array 
       (
        [y] => 18.5 
        [drilldown] => Array 
         (
          [name] => Category0 
          [categories] => Array 
           (
            [0] => 01-Jul 
            [1] => 02-Jul 
            [2] => 03-Jul 
           ) 
          [data] => Array 
           (
            [0] => 27 
            [1] => 14.4 
            [2] => 9.7 
           ) 
          [color] => #7070FA 
         ) 
       ) 
      [1] => Array 
       (
        [y] => 15.6 
        [drilldown] => Array 
         (
          [name] => Category1 
          [categories] => Array 
           (
            [0] => 01-Jul 
            [1] => 02-Jul 
            [2] => 03-Jul 
           ) 
          [data] => Array 
           (
            [0] => 20 
            [1] => 16.1 
            [2] => 0 
           ) 
          [color] => #7070FA 
         ) 
       ) 
      [2] => Array 
       (
        [y] => 21.5 
        [drilldown] => Array 
         (
          [name] => Category2 
          [categories] => Array 
           (
            [0] => 01-Jul 
            [1] => 02-Jul 
            [2] => 03-Jul 
           ) 
          [data] => Array 
           (
            [0] => 20.6 
            [1] => 24.3 
            [2] => 17.9 
           ) 

          [color] => #7070FA 
         ) 

       ) 
      [3] => Array 
       (
        [y] => 10 
        [drilldown] => Array 
         (
          [name] => Category3 
          [categories] => Array 
           (
            [0] => 01-Jul 
            [1] => 02-Jul 
            [2] => 03-Jul 
           ) 
          [data] => Array 
           (
            [0] => 13.8 
            [1] => 11.5 
            [2] => 4 
           ) 
          [color] => #7070FA 
         ) 
       ) 
     ) 
) 

任何建議或幫助是歡迎評論