README

这是一个超级简单的Bundle，简化了使用Google图表工具、Google图表图像API和Google信息图表。

它允许渲染

二维码
饼图（3种方式：canvas或svg，简单的URL图像，简单的URL 3D图像）
柱状图
条形图
面积图
散点图
组合图
表格
仪表盘
蜡烛图
地图树
动态图标

添加（以下有一些特殊推荐）

日历
气泡图
饼图（实际上你不需要它，因为你可以通过饼图和配置来完成，但这是一个快捷方式）
甘特图（请注意，甘特图是beta版）
地理图表
直方图
区间
地图
组织图表
桑基图
步进面积图
时间轴
趋势线
瀑布图
词树

在使用此Bundle之前，请务必阅读图表图像条款和图表工具条款。

它还包含一些Twig扩展，简化了集成。

版本

您应根据您的symfony版本使用此Bundle的不同版本

演示

http://blog.fruitsoftware.com/a-propos/demo-gchartbundle/

如何安装它？

感谢AaronDDM，您可以使用composer来安装此Bundle。

composer require saad-tazi/g-chart-bundle

或者您可以使用以下方法

将此Bundle添加到您的vendor/目录

使用供应商脚本。

在您的deps文件中添加以下行

[SaadTaziGChartBundle]
    git=git://github.com/saadtazi/SaadTaziGChartBundle.git
    target=/bundles/SaadTazi/GChartBundle

运行供应商脚本

./bin/vendors install

使用git子模块。

$ git submodule add git://github.com/saadtazi/SaadTaziGChartBundle.git vendor/bundles/SaadTazi/GChartBundle

将SaadTazi命名空间添加到您的自动加载器

          // app/autoload.php
          $loader->registerNamespaces(array(
                'SaadTazi' => __DIR__.'/../vendor/bundles',
                // your other namespaces
          ));

将此Bundle添加到您的应用程序的kernel

          // app/ApplicationKernel.php
          public function registerBundles()
          {
              return array(
                  // ...
                  new SaadTazi\GChartBundle\SaadTaziGChartBundle(),
                  // ...
              );
          }

演示页面

这是可选的：如果您想查看演示页面，请将以下内容添加到您的routing.yml

    _demo:
        resource: "@SaadTaziGChartBundle/Resources/config/routing.yml"
        type:     yaml
        prefix:   /gchart

您应该安装了templating（php ../composer.phar require templating）并在`config/packages/framework.yml`中激活它

framework:
    templating:
        engines: ['twig']

然后您应该能够访问http://your.site.com/gchart/demo

不要忘记在布局中包含所需的javascript，例如

        <script type="text/javascript">
            // adds the package you need. See https://developers.google.com/chart/interactive/docs/basic_load_libs
            google.charts.load('current', {packages:["corechart", 'table', 'gauge']});
        </script>

如何使用它？

请查看Controller\DemoController以了解如何构建DataTable，以及Resources\views\Demo\demo.html.twig

备注

我实现了Google Chart工具的大部分核心图表类型。但我只实现了3种Google图表图像类型，因为（~~它们很丑，~~）几乎所有它们都可以使用Google Chart工具构建。从可视化来看，我只实现了标记。

哦，请随意fork，添加内容并发送给我pull请求！

注意：您不必使用 Twig 函数：您可以使用 PHP 类（在 DataTable 或 Chart 中）。但您可能会觉得有点“痛苦”。

使用添加的图表

日历、区间和甘特图（需要日期数据的图表）

这些是特殊的图表，请参阅 https://developers.google.com/chart/interactive/docs/gallery/calendar#a-simple-example

这些图表需要第一列中的 JavaScript 日期对象。

因为 Js 日期对象需要像这样写入（在 json 中）


    [ new Date(2012, 3, 13), 37032 ],
    [ new Date(2012, 3, 14), 38024 ],
    [ new Date(2012, 3, 15), 38024 ],
    [ new Date(2012, 3, 16), 38108 ],
    [ new Date(2012, 3, 17), 38229 ],

我在 PHP 和 Json_encode 上遇到了问题。为了避免这种情况，您必须使您的数据如下所示

    $datas = array(
        array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-01"), 'md' => 3),
        array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-02"), 'md' => 5),
        array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-03"), 'md' => 1),
        array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-04"), 'md' => 9),
        array('date' => DateTime::createFromFormat ( 'Y-m-d' , "2016-03-10"), 'md' => 24),
    );
    $res = new DataTable();
    $res->addColumn('date', 'Date', 'date');
    $res->addColumn('my_datas', 'My Datas', 'number');
    foreach($datas as $data) {
        // js month starts at 0 for Jan !
        $date => $data['date']->format("Y, ").(intval($data['date']->format("m"))-1).$data['date']->format(", d");
        $res->addRow([['v' => "new Date[[[{$date}]]]"], ['v' => $data['md']]);
    }

它给出了以下 json（不要被 '"new Date[[' 和 ']]]"' 吓到，它们在 twig 中需要时会被替换）


    [ "new Date[[[2016, 2, 1]]]", 3 ],....

您可以通过使用此代码为您的数据添加工具提示

    // 'role_tooltip' must be written as i showed because it makes all the magic.
    $res->addColumn('role_tooltip', 'Tooltip', 'string');

    // ....

    foreach($datas as $data) {
        // js month starts at 0 for Jan !
        $date => $data['date']->format("Y, ").(intval($data['date']->format("m"))-1).$data['date']->format(", d");
        $res->addRow([['v' => "new Date[[[{$date}]]]"], ['v' => $data['md'], ['v' => "My wonderfull Tooltip for this row"]]);
    }

事件支持

您可以定义自己的回调函数并将其关联到相应的图表事件，如下所示

    <div id="calChart">&nbsp;</div>
    <script>
        $(function() {
            var myMo = function (ee) {
                console.log('Mouse over');
            }
            var myMou = function (ee) {
                console.log('Mouse out');
            }
            var myR = function () {
                console.log('Ready');
            }

            {{ gchart_calendar(calDatas, 'calChart', 950, 180, 'My cal datas', {tooltip:{isHtml: true,trigger: 'selection'}},
                [{'eventName': 'ready', 'callbackFunc': 'myR'},
                 {'eventName': 'onmouseover', 'callbackFunc': 'myMo'},
                 {'eventName': 'onmouseout', 'callbackFunc': 'myMou'},
          ]) }}
        });
    </script>

享受这些修改吧 ;-)

修改

2012-03-20

添加了 composer 支持（感谢 AaronDDM）

2011-10-23

移除了 jQuery 依赖（以及 div 输出 - 现在需要“手动”完成... 提供了更多控制）

2011-09-22

修复零值错误

2011-09-06

添加了 DataTable::toStrictArray()，它会检查数组键（问题 #1）

2011-06-23

初始提交

saad-tazi / g-chart-bundle

维护者

详细信息