2013-07-01 2 views
1

저는 CodeIgniter 프레임 워크에서 PHP 프로젝트 빌드를 작업 중입니다. 이 응용 프로그램은 동적으로 생성되는 많은 그래프를 보유합니다. ronan-gloo highcharts library으로 큰 성공을 거두었습니다. 아래 그래프를 만들 확장이 더 큰 나를 돕고있다Highcharts 드릴 다운 차트 CodeIgniter

$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)가 내 계획.

데모에서는 차트를 만들 때 호출되는 드릴 다운 데이터 (JS Fiddle)가 들어있는 javascript 객체를 만드는 것이 좋습니다. 하지만 어떻게 PHP Codeigniter에서 자바 스크립트가 파리에 쓰여질 때 그것을 할 수 ...

도와주세요!

답변

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 
         ) 
       ) 
     ) 
) 

어떤 제안이나 도움이 의견에 오신 것을 환영합니다

관련 문제