README

这是 Yii 2 的扩展。

实际上，它是对 jQuery Flot Charts 库的包装。

如果您想了解更多关于 Flot 选项和文档的信息，请访问 http://www.flotcharts.org/

安装

与所有 Yii 2 扩展一样，也应通过 Composer 进行安装。

Composer 可以从这里下载：https://getcomposer.org.cn/

在 Composer 包列表中的扩展：https://packagist.org.cn/packages/bburim/flot

安装命令

php composer.phar require "bburim/flot"

基本用法

<?php
use bburim\flot\Chart as Chart;

echo Chart::widget([
	'data' => [
		[
			'label' => 'line', 
			'data'  => [
				[1, 1],
				[2,7],
				[3,12],
				[4,32],
				[5,62],
				[6,89],
			],
			'lines'  => ['show' => true],
			'points' => ['show' => true],
		],
		[
			'label' => 'bars', 
			'data'  => [
				[1,12],
				[2,16],
				[3,89],
				[4,44],
				[5,38],
			],
			'bars' => ['show' => true],
		],
	],
	'options' => [
		'legend' => [
			'position'          => 'nw',
			'show'              => true,
			'margin'            => 10,
			'backgroundOpacity' => 0.5
		],
	],
	'htmlOptions' => [
		'style' => 'width:400px;height:400px;'
	]
]);
?>

选项和参数

此扩展允许您提供一些参数来配置图表的渲染方式。

tagName - DOM 元素标签名。默认值为 'div';

htmlOptions - DOM 容器的 HTML 选项。

options - 选项数组，将被转换为 JSON 并在调用创建图表的函数时作为第三个参数传递给 jQuery。

data - 数据数组，将被转换为 JSON 并在调用创建图表的函数时作为第二个参数传递给 jQuery。

excanvas - true/false。是否包含 excanvas.js。

使用插件

有时您需要包含一些 Flot 插件以使图表更互动。

以下示例显示了包含，例如，jquery.flot.canvas.js 扩展需要添加的内容

<?php
use bburim\flot\Chart as Chart;
use bburim\flot\Plugin as Plugin;

echo Chart::widget([
	'data' => [
    // As before
	],
	'options' => [
    // As before
	],
	'htmlOptions' => [
    // As before
	],
	// Use `plugins` attribute to load required plugins
	'plugins' => [
	    // Use helper class with constants to specify plugin type
		Plugin::CANVAS
	]
]);
?>

以下插件目前作为常量可用

jquery.flot.canvas.js 作为 Plugin::CANVAS

jquery.flot.categories.js 作为 Plugin::CATEGORIES

jquery.flot.crosshair.js 作为 Plugin::CROSSHAIR

jquery.flot.errorbars.js 作为 Plugin::ERRORBARS

jquery.flot.fillbetween.js 作为 Plugin::FILLBETWEEN

jquery.flot.image.js 作为 Plugin::IMAGE

jquery.flot.navigate.js 作为 Plugin::NAVIGATE

jquery.flot.pie.js 作为 Plugin::PIE

jquery.flot.resize.js 作为 Plugin::RESIZE

jquery.flot.selection.js 作为 Plugin::SELECTION

jquery.flot.stack.js 作为 Plugin::STACK

jquery.flot.symbol.js 作为 Plugin::SYMBOL

jquery.flot.threshold.js 作为 Plugin::THRESHOLD

jquery.flot.time.js 作为 Plugin::TIME