README

为 CakePHP 提供的 Google 可视化 API 包装助手，它向 CakePHP 中添加了一个简单的 API，用于创建折线图、条形图、面积图和饼图。

要求

• PHP 5.3+
• CakePHP 2.* (1.3 已不再支持，但在 1.3 分支中可用)

安装

使用 Composer

确保 composer.json 中存在 require。这将把插件安装到 Plugin/DebugKit。

{
    "require": {
        "cjsaylor/gchart": "2.0.*"
    }
}

使用 git 子模块或下载的源代码

• 将子模块作为插件添加。（或者简单复制内容）

git clone git://github.com/cjsaylor/gchart.git app/Plugin/GChart

CakePHP 设置

• 在您的引导程序中加载插件。

CakePlugin::load('GChart');

• 如果您的应用需要，将其作为助手可用。

$this->helpers[] = 'GChart.GChart';

• 在您的布局/视图中包含 Google 的 jsapi 脚本。

<script src="https://www.google.com/jsapi"></script>

示例

在您的控制器中

<?php

$data = array(
  'labels' => array(
    array('string' => 'Sample'),
    array('number' => 'Piston 1'),
    array('number' => 'Piston 2')
  ),
  'data' => array(
    array('S1', 74.01, 74.03),
    array('S2', 74.05, 74.04),
    array('S3', 74.03, 74.01),
    array('S4', 74.00, 74.02),
    array('S5', 74.12, 74.05),
    array('S6', 74.04, 74.04),
    array('S7', 74.05, 74.06),
    array('S8', 74.03, 74.02),
    array('S9', 74.01, 74.03),
    array('S10', 74.04, 74.01),
  ),
  'title' => 'Piston Ring Diameter',
  'type' => 'line'
);

在您的视图中

<?php

echo $this->GChart->start('test');
echo $this->GChart->visualize('test', $data);

生成以下内容

HTML 输出

<div id="test"></div>
<script type="text/javascript">
  google.load("visualization", "1", {packages: ["corechart"]});
</script>
<script type="text/javascript">
  google.setOnLoadCallback(function() {
    var data = new google.visualization.DataTable({"cols":[{"label":"Sample","type":"string"},{"label":"Piston 1","type":"number"},{"label":"Piston 2","type":"number"}],"rows":[{"c":[{"v":"S1"},{"v":74.01},{"v":74.03}]},{"c":[{"v":"S2"},{"v":74.05},{"v":74.04}]},{"c":[{"v":"S3"},{"v":74.03},{"v":74.01}]},{"c":[{"v":"S4"},{"v":74},{"v":74.02}]},{"c":[{"v":"S5"},{"v":74.12},{"v":74.05}]},{"c":[{"v":"S6"},{"v":74.04},{"v":74.04}]},{"c":[{"v":"S7"},{"v":74.05},{"v":74.06}]},{"c":[{"v":"S8"},{"v":74.03},{"v":74.02}]},{"c":[{"v":"S9"},{"v":74.01},{"v":74.03}]},{"c":[{"v":"S10"},{"v":74.04},{"v":74.01}]}]});
    var chart = new google.visualization.LineChart(document.getElementById("test"));
    chart.draw(data, {
      width: 450,
      height: 300,
      is3D: true,
      legend: "bottom",
      title: "Piston Ring Diameter"
    });
  });
</script>

注意

目前支持以下可视化类型

• 面积图
• 条形图
• 饼图
• 折线图
• 表格
• 地理图表

许可证

MIT 许可证，见 license.txt