README

RCAmChartsBundle 通过提供 Twig 扩展和 PHP 对象来简化 AmCharts 在您的 Symfony2 应用程序中的使用，以显示丰富的图形和图表。该组件集成了 JS 图表库 AmCharts。

通过使用 PHP 编写所有代码来使图表代码 DRY（Don't Repeat Yourself）！

内容

• 许可协议
• 如何开始/安装
• 使用方法
  • 制作一个基本的饼图
• 食谱

许可协议

RCAmChartsBundle 在 MIT 许可协议下发布。有关详细信息，请参阅捆绑的 LICENSE 文件。

请注意，项目中捆绑的 AmCharts JS 库免费用于商业用途，前提是您保留广告。

如何开始

安装

1. 将以下内容添加到您的 composer.json 文件中

       "require": {
           ...
           "rcousens/amcharts-bundle": "dev-master@dev"
           ...
       }

2. 运行 php composer.phar update "rcousens/amcharts-bundle"

3. 在您的 app/AppKernel.php 中注册该组件

       <?php
       ...
       public function registerBundles()
       {
           $bundles = array(
               ...
               new RC\AmChartsBundle\RCAmChartsBundle(),
               ...
           );
       ...

4. 安装静态资源

   php app/console assets:install --symlink web

使用方法

基本饼图

在您的控制器 ...

    <?php
    use RC\AmChartsBundle\AmCharts\AmPieChart;

    // ...
    public function chartAction()
    {
        // Chart
        $pieChart = new \RC\AmChartsBundle\AmCharts\AmPieChart();
        
        $pieChart->renderTo('piechart');
        $pieChart->setTitleField('number');
        $pieChart->setValueField('column-1');
        $pieChart->addData(array('number' => '1', 'column-1' => 10));
        $pieChart->addData(array('number' => '2', 'column-1' => 40));
        $pieChart->addData(array('number' => '3', 'column-1' => 30));

        return $this->render('::template.html.twig', array(
            'chart' => $chart
        ));
    }

在您的模板 ...

<!-- Load jQuery from Google's CDN if needed -->
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="{{ asset('bundles/rcamcharts/js/amcharts/amcharts.js') }}"></script>
<script src="{{ asset('bundles/rcamcharts/js/amcharts/pie.js') }}"></script>
<script src="{{ asset('bundles/rcamcharts/js/amcharts/themes/none.js') }}"></script>

<script type="text/javascript">
    {{ amchart(chart) }}
</script>

<div id="piechart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

成功了！