Cakephp2.6 に　HighCharts を プラグイン　して、グラフ描画　

まず

プラグイン用の　プログラム一式を、GitHub より

CakePHP の　app/Plugin 内に取り込む

すると

app/Plugin/Hightchars/内に

　　Controller , Model, Vender, View

などのフォルダが作成される。

http://プラグインを導入したサイト/highcharts/highcharts_demo
で、デモのメニュー画面が表示されれば、ＯＫ。


このプログラム一式には、コンポーネントやヘルパーの設定も含まれているので

グラフ描画機能を

通常のプログラムの一部として使うことができる。



例えば通常のプログラム：

CharttestsController.php

class CharttestsController extends AppController {
	
	public $helpers = array('Highcharts.Highcharts');
	public $components = array('Highcharts.Highcharts');

	public $name = 'Charttests';
	
	
	public function index() {
	  $this->pie();
	}
	
	public function pie() {
    $chartData = array(
        array(
           'name' => '安部',
           'y' => 45.0,
           'sliced' => true,
           'selected' => true
            ),
       array('佐藤', 26.8),
       array('後藤', 12.8),
       array('夏目', 8.5),
       array('芥川', 6.2),
       array('田中', 0.7)
   );
     $chartName = 'Pie Chart';
   
    $pieChart = $this->Highcharts->create( $chartName, 'pie' );

      $this->Highcharts->setChartParams(
        $chartName,
       array(
           'renderTo'     => 'piewrapper',  // 表示先のID。このidを取得してグラフを追加します。
            'chartWidth'   => 500,
            'chartHeight'  => 450,
            'chartTheme'   => '',
            'title'        => '集計',
            'plotOptionsShowInLegend' => TRUE,
            'creditsEnabled'  => FALSE
            )
        );
    $series = $this->Highcharts->addChartSeries();
    $series->addName('集計')->addData($chartData);
    $pieChart->addSeries($series);
	
                
                $this->set(compact('chartName'));
                $this->set(compact('chartData'));
}

}

View フォルダ内の Charttests フォルダ内に

　　index.ctp

<div class="chart">
       <div id="piewrapper" style="display: block; float: left; width:90%; margin-bottom: 20px;"></div>
        <div class="clear"></div>	

$value){
	if($key == 0) { ?>
	


　名前

　値



    
    

    
    
 
	

    
    

    
    

   


        <?php echo $this->Highcharts->render($chartName); ?>

</div>

この render関数 により

index.ctp 内に

$(document).ready(function){…
が挿入され

これにより、表示時に、グラフが描画される。



$(document) があるので、jQuery が必要

View-Layouts フォルダ内の

　　default.ctp 内に

		echo $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'));

を追加する