README

轻量级的PHP包装器，用于Laravel框架中的Google Chart JavaScript库

安装

通过Composer安装

composer require jakubkratina/larachartie

注册服务提供者

\JK\LaraChartie\ChartieServiceProvider::class

注册LaraChartie的外观

'Chartie' => JK\LaraChartie\Facades\Chart::class

用法

您可以为定义创建一个文件夹，例如 app\Charts\DataTable。

在这个文件夹中，您可以放置实现 JK\LaraChartie\Contracts\Source 协议的文件。

<?php

namespace App\Charts\DataTable;

use Carbon\Carbon;
use JK\LaraChartie\Contracts\DataTable;
use JK\LaraChartie\Contracts\Source;
use JK\LaraChartie\DataTable\Type;



class UsersSource implements JK\LaraChartie\Contracts\Source
{

	/**
	 * @param DataTable $dataTable
	 */
	public function columns(DataTable $dataTable)
	{
		$dataTable
			->addColumn(Type::DATE, 'Created At')
			->addStringColumn('Name')
			->addStringColumn('Country');
	}



	/**
	 * @param DataTable $dataTable
	 */
	public function fill(DataTable $dataTable)
	{
		foreach (User::all() as $user) {
			$dataTable->addRow(
				$user->created_at,
				$user->firstname,
				[
					'value' => $user->country,
					'format' => 'User is from ' . $user->country
				]
			);
		}
	}
}

然后在控制器类中调用以下内容

use use JK\LaraChartie\Facades\Chart;
use use App\Charts\DataTable\UsersStorage;

class UsersController extends Controller
{

	/**
	 * @return array
	 */
	public function progress()
	{
		return Chart::dataTable()
			->source(UsersStorage::class)
			->toArray();
	}
}

您的输出将如下所示

{
	"cols": [
		{
			"label": "Date",
			"type": "date"
		},
		{
			"label": "Name",
			"type": "string"
		},
		{
			"label": "Country",
			"type": "string"
		}
	],
	"rows": [
		{
			"c": [
				{
					"v": "Date(2016, 8, 12, 18, 24, 21)",
					"f": null
				},
				{
					"v": "John",
					"f": null
				},
				{
					"v": "ZA",
					"f": "User is from ZA"
				}
			]
		},
		{
			"c": [
					{
						"v": "Date(2016, 8, 15, 10, 0, 53)",
						"f": null
					},
					{
						"v": "Tomas",
						"f": null
					},
					{
						"v": "CA",
						"f": "User is from CA"
					}
			]
		}
	]
}

最终，您只需通过Ajax请求将数据传递给Google图表即可

const users = $.ajax({
			url: '/api/users',
			dataType: 'json',
			async: false
		}).responseText;

		const data = new google.visualization.DataTable(users);

格式化器

默认格式化器使用 LineChartFormatter，它提供之前的响应。

如果您想格式化结果，请使用以下格式化器之一

饼图格式化器

	return Chart::dataTable()
		->addStringColumn('Tasks')
		->addNumberColumn('Hours per Day')
		->formatter(PieChartFormatter)
		->addRows([
			['Work', 11],
			['Eat', 2],
			['Commute', 2],
			['Watch TV', 2],
			['Sleep', 7]
		])
		->toArray();

响应

[
	["Tasks", "Hours per Day"],
	["Work", 11],
	["Eat", 2],
	["Commute", 2],
	["Watch TV", 2],
	["Sleep", 7]
]

DataTable的方法

interface DataTable
{

	/**
	 * @param string $type
	 * @param string $label
	 * @return $this
	 */
	public function addColumn($type, $label);



	/**
	 * @param string $label
	 * @return $this
	 */
	public function addStringColumn($label);



	/**
	 * @param string $label
	 * @return $this
	 */
	public function addNumberColumn($label);



	/**
	 * @param string $label
	 * @return $this
	 */
	public function addBooleanColumn($label);



	/**
	 * @param string $label
	 * @return $this
	 */
	public function addDateColumn($label);



	/**
	 * @param string $label
	 * @return $this
	 */
	public function addDateTimeColumn($label);



	/**
	 * @param array ...$values
	 * @return $this
	 */
	public function addRow(... $values);



	/**
	 * @return Collection|Column[]
	 */
	public function columns();



	/**
	 * @return Collection|Column[]
	 */
	public function rows();



	/**
	 * @return array
	 */
	public function toArray();



	/**
	 * @param string $dataTable
	 * @return DataTable
	 */
	public function source($dataTable);
}