CakePHPでグラフを簡単につくれるHighChartsプラグインを使ってみた

HighChartsプラグインとは

CakePHPのプラグインで、ほとんどCake側の設定のみで様々なタイプのグラフが作成できます。

デモページも公開されています。
http://destinydrivenlive.com/highcharts/highcharts/highcharts_demo

Gitリポジトリから取得

gitレポジトリはこちら。
https://github.com/destinydriven/cakephp-highcharts-plugin

cloneしてくる

git clone https://github.com/destinydriven/cakephp-highcharts-plugin.git /app/Plugin/HighChart

1
2
git clone https://github.com/destinydriven/cakephp-highcharts-plugin.git /app/Plugin/HighChart
 

製作者が推奨されている方法

git init
git submodule add git://github.com/destinydriven/cakephp-high-charts-plugin.git Plugin/HighCharts
git submodule init
git submodule update

1
2
3
4
5
git init
git submodule add git://github.com/destinydriven/cakephp-high-charts-plugin.git Plugin/HighCharts
git submodule init
git submodule update
 

別にcloneして来ても特に変わらず。

Controllerに記述

ComponentとHelperを追記する

public $helpers = array(‘HighCharts.HighCharts’);
public $component = array(‘HighCharts.HighCharts’);

1
2
3
public $helpers = array(‘HighCharts.HighCharts’);
public $component = array(‘HighCharts.HighCharts’);
 

使い使いたいメソッドに下記を追加

public function pie() {
// ここでグラフの中身を整形します。オプションを渡して装飾できるようです。
$chartData = array(
array(
さくらVPSで借りたCentOSでLAMP環境のセッティング ‘name’ => ‘Chrome’,
‘y’ => 45.0,
すごく基本的なiptablesの設定 ‘sliced’ => true,
‘selected’ wholesale nfl jerseys => true
cheap mlb jerseys ),
array(‘IE’, 26.8),
array(‘Firefox’, 12.8),
array(‘Safari’, 8.5),
array(‘Opera’, 6.2),
wholesale jerseys array(‘Others’, 0.7)
7 );
$chartName = ‘PieChart’; //コイツをViewで呼び出します。なんか気持ち悪い。
$pieChart = $this->HighCharts->create( $chartName, ‘pie’ );
$this->HighCharts->setChartParams(
$chartName,
Role array(
‘renderTo’ => ‘piewrapper’, // 表示先のID。このidを取得してグラフを追加します。
‘chartWidth’ => 500,
‘chartHeight’ => 450,
‘chartTheme’ => ”,
‘title’ => ‘ブラウザ戦争’,
‘plotOptionsShowInLegend’ => TRUE,
‘creditsEnabled’ => FALSE
Junior )
);
$series = $this->HighCharts->addChartSeries();
$series->addName(‘ブラウザ戦争’)->addData($chartData);
$pieChart->addSeries($series);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public function pie() {
    // ここでグラフの中身を整形します。オプションを渡して装飾できるようです。
    $chartData = array(
        array(
           ‘name’ => ‘Chrome’,
           ‘y’ => 45.0,
           ‘sliced’ => true,
           ‘selected’ => true
            ),
       array(‘IE’, 26.8),
       array(‘Firefox’, 12.8),
       array(‘Safari’, 8.5),
       array(‘Opera’, 6.2),
       array(‘Others’, 0.7)
   );
   $chartName = ‘PieChart’; //コイツをViewで呼び出します。なんか気持ち悪い。
    $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);
}
 

##Viewに記述

<div id=”piewrapper”></div>
<?php echo $this->HighCharts->render(‘PieChart’); ?>

1
2
3
<div id=“piewrapper”></div>
<?php echo $this>HighCharts>render(‘PieChart’); ?>
 

以上でこんな感じのグラフが作成されます。

表示確認

HighChartsDemoグラフ

デモページが見れちゃう

/my_project//high_charts/high_charts_demo

これでデモページを確認できてしまいます。他にも色々と確認できます。

なので、削除してしまうか、アクセスできないようにしておきましょう。

SNSでもご購読できます。

コメントを残す

*