README

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

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

要求

• CakePHP 2.0+
• PHP 5.3+

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

安装

克隆此存储库或将副本下载到 CakePHP 或您应用程序的 Plugins 目录。请确保文件夹名为 GoogleCharts。

确保您在应用程序的引导文件中加载插件

CakePlugin::loadAll();

使用方法

使用此插件有两个阶段

1. 构建数据。
2. 构建用于显示的 JavaScript。

##控制器设置与操作##

在您的控制器中包含 GoogleCharts 类： App::uses('GoogleCharts', 'GoogleCharts.Lib');。此类将帮助构建图表数据。

此外，在控制器中包含 GoogleChartsHelper 类，以便我们可以在视图中使用它：public $helpers = array('GoogleCharts.GoogleCharts');

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

//Get data from model
//Get the last 10 rounds for score graph
$rounds = $this->Round->find(
	'all',
	array(
		'conditions' => array(
			'Round.user_id' => $this->Auth->user('id')
		),
		'order' => array('Round.event_date' => 'ASC'),
		'limit' => 10,
		'fields' => array(
			'Round.score',
			'Round.event_date'
		)
	)
);

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

$chart->type("LineChart");	
	//Options array holds all options for Chart API
	$chart->options(array('title' => "Recent Scores")); 
	$chart->columns(array(
		//Each column key should correspond to a field in your data array
		'event_date' => array(
			//Tells the chart what type of data this is
			'type' => 'string',		
			//The chart label for this column			
			'label' => 'Date'
		),
		'score' => array(
			'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($model as $round){
	$chart->addRow($round['Round']);
}

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


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

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

##视图##

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

许可证

版权 2012 Scott Harwell

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

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

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