README

一个简单的图表小部件，基于 [Dygraphs] (http://dygraphs.com/)，适用于 Yii 1。

变更日志

1.1.0 - 添加了可见性复选框功能。

安装

下载最新版本，解压缩 widget 文件夹中的内容，并将其放入您的 Yii 应用程序中的 protected\extensions\dygraphswidget 文件夹。

使用方法

在视图中，使用您的数据矩阵作为 data 选项创建小部件。

$this->widget('ext.dygraphswidget.DygraphsWidget', array(
		'data'=> $your_data,
	));

Dygraphs 选项

您可以将 options 属性设置为向 Dygraphs 对象传递额外的选项

$this->widget('DygraphsWidget', array(
		'data'=> $your_data,
		'options'=>array(
			'labels' => array('X', 'Sin', 'Rand', 'Pow'),
			'title'=> 'Main Graph',
			//...
		),
	));

数据格式

数据属性可以用三种不同的格式指定。请考虑以下示例，并确保阅读[官方文档] (http://dygraphs.com/data.html) 以获取更多详细信息

矩阵

$data = array(
	array(1, 25, 100),
	array(2, 50, 90),
	array(3, 100, 80),
	//...
);

URL 数据的文本文件的绝对 URL。

$data = 'http://dygraphs.com/dow.txt';

函数一个包含 JS 代码的字符串，该代码返回 Dygraphs 可用的数据对象。

$data = 'function () {
	var data = [];
      for (var i = 0; i < 1000; i++) {
        var base = 10 * Math.sin(i / 90.0);
        data.push([i, base, base + Math.sin(i / 2.0)]);
      }
      var highlight_start = 450;
      var highlight_end = 500;
      for (var i = highlight_start; i <= highlight_end; i++) {
        data[i][2] += 5.0;
      }
	return data;
}';

附加选项

以下小部件属性也可以指定

xIsDate：如果数据矩阵中每行的第一个值是日期字符串，则将此属性设置为 true，以便正确将其转换为 Dygraphs 的 JS 日期对象。
scriptUrl：Dygraphs.js 库的 URL。如果未设置，则小部件将本地发布其自己的 Dygraphs 库版本。
model 和 attribute：指定 CModel 实例及其属性之一，以便从中获取数据。
jsVarName：指定创建 Dygraphs 对象时将接收的 JS 变量的自定义名称。
htmlOptions：包含图形的 div 的额外 HTML 属性。

传递 JavaScript 函数

数据和小部件的选项都支持字面 JavaScript 代码。要传递 JavaScript 代码，只需在包含代码的字符串前面加上 js:。例如，如果您的数据包含在名为 javascriptData 的 JavaScript 变量中

$data = 'js:javascriptData';

或者假设您需要传递一个用于回调选项的函数

$options = array(
	'underlayCallback' => 'js:function(canvas, area, g)
			{
				var bottom_left = g.toDomCoords(highlight_start, -20);
				var top_right = g.toDomCoords(highlight_end, +20);

				var left = bottom_left[0];
				var right = top_right[0];

				canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
				canvas.fillRect(left, area.y, right - left, area.h);
            }'
);

或者，您可以传递一个新的 CJavaScriptExpression() 实例，该实例使用您的 JavaScript 字符串构造。

可见性复选框

在图表中隐藏和显示某些数据系列通常很有用。该小部件具有辅助脚本，可以轻松通过复选框控制系列的可视性。

要使用此功能，请确保您的页面在每个图表系列旁边都有一个复选框，并为每个复选框提供一个具有控制其系列索引的 id 属性。然后，使用匹配复选框组的 checkBoxSelector 配置小部件。例如，对于具有 3 个数据系列的图表

<input class="visibility" id="0" type="checkbox">
<input class="visibility" id="1" type="checkbox">
<input class="visibility" id="2" type="checkbox">

$this->widget('DygraphsWidget', array(
		'data'=> array(
			// (x, series0, series1, series2)
			array(0, 3, 25, 247),
			array(1, 6, 26, 127),
			array(2, 9, 27, -7),
			//...
		),
		'checkBoxSelector' => 'input.visibility',
		//...
	),
));

将复选框与数据系列关联的属性（例如示例中的 id）可以通过配置 checkBoxReferenceAttr 来更改。

sibilino / dygraphswidget

维护者

详细信息