README

Google 的图表 API 包装器（参见 https://developers.google.com/chart/），以便在 Yii2 中使用。

安装

安装此扩展的首选方式是通过 composer。

composer require fruppel/yii2-googlecharts

使用方法

示例 1：带有数据表格式的 3D 饼图

<?php
use \fruppel\googlecharts\GoogleCharts;
...
?>

<?= GoogleCharts::widget([
	'id' => 'my-id',
	'visualization' => 'PieChart',
	'data' => [
		'cols' => [
            [
	            'id' => 'topping',
                'label' => 'Topping',
				'type' => 'string'
            ],
	        [
		        'id' => 'slices',
		        'label' => 'Slices',
		        'type' => 'number'
	        ]
        ],
        'rows' => [
	        [
		        'c' => [
					['v' => 'Mushrooms'],
			        ['v' => 3]
		        ],
	        ],
	        [
		        'c' => [
			        ['v' => 'Onions'],
			        ['v' => 1]
		        ]
	        ],
	        [
		        'c' => [
			        ['v' => 'Olives'],
			        ['v' => 1]
		        ]
	        ],
	        [
		        'c' => [
			        ['v' => 'Zucchini'],
                    ['v' => 1]
		        ]
	        ],
	        [
		        'c' => [
			        ['v' => 'Pepperoni'],
                    ['v' => 2]
		        ]
	        ],
        ]
    ],
    'options' => [
        'title' => 'How Much Pizza I Ate Last Night',
        'width' => 400,
        'height' => 300,
        'is3D' => true,
    ],
    'responsive' => true,
]) ?>

示例 2：使用数据数组的 AreaChart（将被转换为数据表）

<?php
use \fruppel\googlecharts\GoogleCharts;
...
<?= GoogleCharts::widget([
	'visualization' => 'AreaChart',
		'options' => [
			'title' => 'Company Performance',
			'hAxis' => [
				'title' => 'Year',
				'titleTextStyle' => [
					'color' => '#333'
				]
			],
			'vAxis' => [
				'minValue' => 0
			]
		],
	'dataArray' => [
	        ['Year', 'Sales', 'Expenses'],
	        ['2013',  1000,      400],
	        ['2014',  1170,      460],
	        ['2015',  660,       1120],
	        ['2016',  1030,      540]
	]
])
?>

将图表渲染为 png 图片

将 $asPng 选项设置为 true，如下示例所示

<?= GoogleCharts::widget([
	'asPng' => true,
	...

注意：目前此功能仅适用于核心图表和地理图表。有关更多信息，请参阅图表文档：https://developers.google.com/chart/interactive/docs/printing