README

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

变更日志

1.1.0 - Support for DateTime data and Data Providers.
1.0.0 - Added visibility checkboxes feature and completed tests.

安装

Composer

将 sibilino/yii2-dygraphswidget 添加到您的 composer.json 文件中，并按常规执行 Composer 更新。

"require": {
	"sibilino/yii2-dygraphswidget": "*"
}

手动

如果您无法或不想使用 Composer，则必须手动创建小部件文件夹，然后配置您的 Yii 应用程序来自动加载小部件类。

首先，在您的 Yii 应用程序的 vendor 子文件夹中创建文件夹结构 sibilino/yii2-dygraphswidget/widget。

然后，下载小部件 .zip 文件，并将其内容提取到上一步创建的文件夹中。

接下来，编辑 config/web.php 并添加以下条目

[
	//...
	'aliases' => [
		'@sibilino/y2dygraphs' => '@vendor/sibilino/yii2-dygraphswidget/widget',
	],
	//...
]

最后，记住在调用小部件时使用命名空间 sibilino\y2dygraphs。

用法

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

use sibilino\y2dygraphs\DygraphsWidget;

echo DygraphsWidget::widget([
	'data' => $your_data,
]);

Dygraphs 选项

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

echo DygraphsWidget::widget([
	'data' => $your_data,
	'options' => [
		'labels' => ['X', 'Sin', 'Rand', 'Pow'],
		'title'=> 'Main Graph',
		//...
	],
]);

数据格式

在组件中显示的数据可以通过几种方式指定。考虑以下示例，并确保阅读 [官方文档] (http://dygraphs.com/data.html) 获取更多信息

矩阵

$data = [
	[1, 25, 100],
	[2, 50, 90],
	[3, 100, 80],
	//...
];

URL 包含数据的文本文件的 URL。

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

模型属性 指定 model 和 attribute 配置参数以从 yii\base\Model 对象的属性中获取数据

$myModel = UserStats::findOne($id);
// Assume $myModel->loginAttempts contains a matrix of login attempts per day
echo DygraphsWidget::widget([
	'model' => $myModel,
	'attribute' => 'loginAttempts',
	'options' => [
		//...
	],
]);

数据提供者 data 属性可以包含一个实现 yii\data\DataProviderInterface 的数据提供者。在这种情况下，数据矩阵将从数据提供者提供的模型生成。每一行数据将包含一个模型的属性值。默认情况下，将使用每个模型的所有属性，但您可以通过配置 attributes 属性来指定要出现在每一行中的属性列表（指定的顺序将被考虑）。

$provider = new ActiveDataProvider([
    'query' => User::find(),
]);
// Let's assume User contains the attributes 'id', 'joinDate', 'powerLevel'
echo DygraphsWidget::widget([
	'data' => $provider,
	'attributes' => ['joinDate', 'powerLevel'], // Display the graph of powerLevel by joinDate
	'options' => [
		//...
	],
]);

JavaScript 返回 Dygraphs 可用数据对象的 JS 代码。代码必须包装在 JsExpression 对象中

$your_data = new JsExpression('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：如果数据矩阵中的 x 值（每行中的第一个值）是日期字符串，则将此属性设置为 true，以便正确地将它们转换为 Dygraphs 的 JS 日期对象。
scriptUrl：Dygraphs.js 库的 URL。如果未设置，小部件将本地发布其自己的 Dygraphs 库版本。
model 和 attribute：指定一个 yii\base\Model 实例及其一个属性，以从其中获取数据。
attributes：当 data 包含数据提供者时使用。使用模型属性列表配置 attributes，这些属性将出现在数据矩阵的每一行中。如果此列表为空，则将使用所有属性。
jsVarName：指定创建时将接收 Dygraphs 对象的 JS 变量的自定义名称。
htmlOptions：包含图表的 div 的附加 HTML 属性。

选项中的 JavaScript 代码

任何需要传递 JavaScript 代码（例如，将函数传递给选项）的时候，只需传递一个新的 JsExpression($your_js_code)。例如

$options = [
    'underlayCallback' => new JsExpression('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);
            }'),
];

可见性复选框

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

要使用此功能，请确保您的页面在图表中为每个数据系列有一个复选框，并给每个复选框一个 id 属性，该属性与其控制的系列索引相对应。然后，通过配置 checkBoxSelector 来配置小部件，使其与复选框组相匹配。例如，对于具有 2 个数据系列的图表

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

<?= DygraphsWidget::widget([
	'checkBoxSelector' => '.visibility',
	'data' => [
		// [x, series0, series1]
		[1, 25, 100],
		[2, 50, 90],
		[3, 100, 80],
		//...
	],
	'options' => [
		// Starting visibility
		'visibility' => [
			false,
			true,
		],
		//...
	],
	// ...
]);?>

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

sibilino/yii2-dygraphswidget

维护者

详细信息