README

将 Simile 时间轴集成到 Yii 2.0 PHP 框架的 Widget。

时间轴 Widget 渲染一个版本为 2.3.1 的 JavaScript Simile 时间轴。时间轴的事件数据由 Yii DataProvider 提供（任何实现 yii\data\DataProviderInterface 的对象）。

时间轴 Widget 的演示请访问：这里。

关于 Simile 时间轴的更多信息以及一些演示可以在以下链接找到： http://www.simile-widgets.org/timeline/。 注意：信息非常简略，经常是相互矛盾或明显错误的。Simile 时间轴的代码已经超过十二年，似乎已经废弃很长时间。它甚至没有完成：许多或多或少有文档记录的功能根本没有实现。尽管如此，Simile 时间轴是一个很好的概念，核心代码看起来运行相当稳定。《时间轴》Widget 只使用了经过良好证明的 Simile 时间轴部分，并没有触及许多未完成的环节。

安装

安装 时间轴 的首选方式是通过 Composer。将以下内容添加到您的 composer.json 文件的 require 部分中

"sjaakp/yii2-timeline": "*"

或者运行

composer require sjaakp/yii2-timeline "*"

您可以通过下载 ZIP 格式的源代码来手动安装 时间轴。

使用时间轴

在视图中使用 时间轴 的代码如下

... other View code ...
<?php
	// define Timeline
	$t = Timeline::begin([
		'dataProvider' => $provider,
		'attributes' => [
			'start' => 'startDate',
			... more attributes ...
		]
		... more Timeline options ...
	]);

	// define main Band
	$t->band([
		'width' => '60%',
		'intervalUnit' => Timeline::MONTH,
		'intervalPixels' => 100
		// layout not set, use default
	]);

	// define secundary Band
	$t->band([
		'width' => '40%',
		'intervalUnit' => Timeline::YEAR,
		'intervalPixels' => 120,
		'layout' => 'overview'
	]);

	// complete definition
	Timeline::end();
?>
... more View code ...

band() 方法是可链式的，所以也可以这样写

<?php
	Timeline::begin([
		'dataProvider' => $provider,
		'attributes' => [
			'start' => 'startDate',
			... more attributes ...
		]
		... more Timeline options ...
	])->band([
		'width' => '60%',
		'intervalUnit' => Timeline::MONTH,
		'intervalPixels' => 100
	])->band([
		'width' => '40%',
		'intervalUnit' => Timeline::YEAR,
		'intervalPixels' => 120,
		'layout' => 'overview'
	])->end();
?>

选项

时间轴有以下选项

dataProvider：时间轴的数据提供者。必须设置。
attributes：一个数组，包含 key => value 对，即 {时间轴属性名} => {模型属性名}。这用于将模型属性名转换为时间轴属性名。必需。
height：时间轴的高度。默认：200。可以有以下值
以像素为单位的 integer 高度
有效的 CSS 高度（例如以 ems 为单位）
false 高度未设置；注意：高度必须通过其他方式（CSS）设置，否则时间轴将不会显示。
start（可选）：开始日期
end（可选）：结束日期
center（可选）：时间轴的初始位置
htmlOptions（可选）：时间轴容器的 HTML 选项数组。如果需要显式设置 ID，请使用此选项。

波段

时间轴 由一个或多个波段组成。它们以不同的时间分辨率显示事件。

波段通过时间轴方法 band() 定义。

public function band( $options, $zones = null )

选项

$options 是一个数组，具有以下键

width：此波段占用时间轴的部分，以百分比或 CSS3 维度表示（是的，您说得对：“height” 会是一个更恰当的名称，但 Simile 时间轴就是这样定义的），
layout：唯一合理的值是 'overview'；'detailed' 也会工作，但似乎有很多问题；所有其他值（包括无）默认为 'compact'，这是主波段的布局
intervalUnit：将 Band 水平刻度分割的时间单位。该值应该是以下单位常量之一（是的，时间线有令人惊叹的范围！）
- Timeline::MILLISECOND
- Timeline::SECOND
- Timeline::MINUTE
- Timeline::HOUR
- Timeline::DAY
- Timeline::WEEK
- Timeline::MONTH
- Timeline::YEAR
- Timeline::DECADE
- Timeline::CENTURY
- Timeline::MILLENNIUM
intervalPixels：水平刻度上每个分割的宽度（以像素为单位）
multiple（可选）：将水平刻度分割修改为单位倍数

zones

可选，每个时间线 Band 可以有一个或多个区域，这些区域中的水平分辨率与其他 Band 不同。

$zones 是 null，或者是一个具有以下键的数组

start：区域开始日期
end：结束
magnify：分辨率的乘数因子
unit：区域的单位；应该是以下单位常量之一
multiple（可选）：将水平刻度分割修改为单位倍数

事件

Timeline 显示事件：具有特定时间点的模型或 ActiveRecords。

Timeline::attributes 属性持有从模型属性名称到时间线属性名称的转换。

对于 Timeline，有一些属性是必需的。时间线的名称是

start：事件所在的时间点
text：在主时间线上显示的文本

事件有两种类型

瞬时事件

这些是基本事件，只有一个时间点。《时间线》将它们显示为小针图标。只需要上述属性。

持续时间事件

这些事件有一定的时间长度。《时间线》将它们显示为一块蓝色“胶带”。除了上述属性外，还需要以下内容

end：事件结束的时间点。

持续时间事件还有一些可选属性，使事件 不精确

latestStart
earliestEnd

持续时间事件的模糊部分以淡化蓝色胶带的形式显示。

可选事件属性

其他一些事件属性包括

caption：工具提示的文本
description：在弹出“气泡”中出现的文本。
icon：针图标（仅限瞬时事件）的 URL。
颜色
textColor
link：将弹出气泡的标题修改为具有此 href 的链接。

对于大胆的人来说，还有更多事件属性。

日期

Timeline 理解许多日期格式（在选项和事件数据中）。每个日期都可以以下列格式之一提供

一个 string，通过 JavaScript 日期识别，格式为 RFC2822 或 ISO-8601；其中包含 MySQL date 和 datetime 字段
一个 PHP DateTime 对象
一个 array，通过 JavaScript 日期识别：[ year, month, day?, hour?, minute?, second?, millisecond? ]。注意：月份为零索引，因此一月 == 0，五月 == 4
一个 integer：Unix 时间戳（自 Unix 纪元以来的秒数，1970 年 1 月 1 日，PHP time() 的返回值）

sjaakp / yii2-timeline

维护者

详细信息