README

这是尝试构建一个多功能的 CakePHP 插件以与 Google Charts Javascript API 交互的尝试。

欢迎任何帮助增强/修复此插件问题的协助！

要求

CakePHP 3.0+
PHP 5.4.16+
jQuery

目前，此插件仅支持二维图表（折线图、柱状图、饼图等）。

安装

克隆此仓库或将副本下载到应用的 plugins 目录。请确保文件夹命名为 GoogleCharts。

请确保在应用的 bootstrap 文件中使用以下任一行加载插件：

Plugin::loadAll();

Plugin::load('GoogleCharts');

用法

使用此插件有两个阶段

构建数据。
构建用于显示的 Javascript。

##控制器设置 & 动作##

请确保您的应用 composer.json 文件已更新以自动加载插件。

"psr-4": {
    (...)
    "GoogleCharts\\": "./plugins/GoogleCharts/src"
}

如果需要，运行 composer dumpautoload。

在控制器方法中包含 GoogleCharts 类： require_once(ROOT.DS.'plugins'.DS.'GoogleCharts'.DS.'vendor'.DS.'GoogleCharts.php');。此类将帮助构建图表数据。

此外，在控制器的 beforeRender 方法中加载 GoogleChartsHelper 类，以便我们可以在视图中使用它：$this->getView()->loadHelper('GoogleCharts.GoogleCharts');

GoogleCharts 类旨在模仿 Google Chart API 需要的属性。您要在页面上显示的每个图表都需要此类的一个实例。一旦您使用设置和数据准备好了此类，然后将其设置给视图以传递给视图辅助工具。

//Get data from model
//Get the last 10 rounds for score graph
$rounds = $this->Rounds->find('all')
    ->select(['Round.score', 'Round.event_date'])
    ->where(['Round.user_id' => $this->Auth->user('id')])
    ->order(['Round.event_date' => 'ASC'])
    ->limit(10)
    ->toArray();

//Setup data for chart
$chart = new GoogleCharts();

$chart->type("LineChart");
//Options array holds all options for Chart API
$chart->options(['title' => 'Recent Scores']);
$chart->columns([
    //Each column key should correspond to a field in your data array
    'event_date' => [
        //Tells the chart what type of data this is
        'type' => 'string',
        //The chart label for this column
        'label' => 'Date'
    ],
    'score' => [
        'type' => 'number',
        'label' => 'Score',
        //Optional NumberFormat pattern
        'format' => '#,###'
    ]
]);

//Loop through our data and creates data rows
//Data will be added to rows based on the column keys above (event_date, score).
//If there are missing fields in your data or the keys do not match, then this will not work.
foreach($rounds as $round) {
    $chart->addRow($round);
}

//You can also use this way to loop through data and creates data rows:
foreach($rounds as $round) {
    $chart->addRow([
        'event_date' => $round['event_date'],
        'score' => $round['score']
    ]);
}

//You can also manually add rows:
$chart->addRow([
    'event_date' => '1/1/2012',
    'score' => 55
]);

//Set the chart for your view
$this->set(compact('chart'));

##视图##

为图表创建一个 div。
- 您可以使用默认的 chart_div 作为 ID，或者设置自己的。
- 如果您设置了自定义的 div ID（或需要多个图表），则更新您的图表对象：<?php $chart->div('div_id');?>
使用 GoogleChartsHelper 显示您的图表（s）。
- <div id="chart_div"><?php $this->GoogleCharts->createJsChart($chart);?></div>
请确保您的布局中有一个名为 'script' 的视图块。

许可

版权 2012 Scott Harwell

根据 Apache License，版本 2.0（“许可”）；除非您遵守许可，否则不得使用此文件。您可以在以下位置获得许可副本：

https://apache.ac.cn/licenses/LICENSE-2.0

除非适用法律要求或书面同意，否则在许可下分发的软件按“原样”基础分发，不提供任何明示或暗示的保证或条件。有关许可的具体语言管辖权限和限制，请参阅许可。

scottharwell / google-charts

维护者

详细信息

README

要求

安装

用法

许可