总览
时间线图是按时间顺序可视化的事件。它既显示占用时间段的事件(范围),又显示持续时间为零的事件(瞬间)。事件和日期显示在长条形图(轴)上。
一个甘特图是项目管理使用时间表的一种特殊形式。
本文介绍了如何创建基本的时间线图以及配置特定于该类型的设置。您还可以查看下表以简要了解时间轴图表的特征:
模组
时间线图需要添加核心和时间线图模块:
快速开始
要创建时间线图表,请使用anychart.timeline()图表构造函数。
然后调用range()和moment()方法来创建范围序列和矩序列。
下面的示例演示如何创建基本的时间线图表:
// create data
var rangeData1 = [
[“Task 1”, Date.UTC(2004,0,4), Date.UTC(2004,7,1)],
[“Task 2”, Date.UTC(2004,7,1), Date.UTC(2005,8,10)]
];
var rangeData2 = [
[“New Task 1”, Date.UTC(2005,10,1), Date.UTC(2006,5,1)],
[“New Task 2”, Date.UTC(2006,5,15), Date.UTC(2006,11,1)]
];
var momentData1 = [
[Date.UTC(2004,2,21), “Meeting 1”],
[Date.UTC(2005,3,19), “Meeting 2”],
[Date.UTC(2006,1,1), “Meeting 3”]
];
var momentData2 = [
[Date.UTC(2004,5,12), “Training 1”],
[Date.UTC(2005,5,1), “Training 2”],
[Date.UTC(2006,1,26), “Training 3”]
];
// create a chart
var chart = anychart.timeline();
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
// create the first moment series
var momentSeries1 = chart.moment(momentData1);
// create the second moment series
var momentSeries2 = chart.moment(momentData2);
// set the container id
chart.container(“container”);
// initiate drawing the chart
chart.draw();
常规设置
在AnyChart中,为所有图表类型(包括时间线图表)以相同的方式配置了许多设置(例如,图例和交互设置)。
特殊设定
数据
系列有两种类型:范围和力矩。它们的数据传递给range()和moment()方法。
如果您使用对象符号设置数据,则可以在下面找到所需的数据字段。
对于range series,请使用以下字段:
name 设置范围名称
start 设定开始日期
end 设定结束日期
对于矩系列,请使用以下字段:
y 设置时刻名称
x 设定日期
注意:可以在数据中添加自定义字段-请参见本文的“ 标签和工具提示”部分。
如果范围重叠,则会以不同的高度绘制它们,如以下示例中的两个第一个范围:
// create data
var rangeData1 = [
{name: “Task 1”, start: Date.UTC(2004,0,4), end: Date.UTC(2004,11,1)},
{name: “Task 2”, start: Date.UTC(2004,7,1), end: Date.UTC(2005,8,10)}
];
var rangeData2 = [
{name: “New Task 1”, start: Date.UTC(2005,10,1), end: Date.UTC(2006,5,1)},
{name: “New Task 2”, start: Date.UTC(2006,5,15), end: Date.UTC(2006,11,1)}
];
var momentData1 = [
{x: Date.UTC(2004,2,21), y: “Meeting 1”},
{x: Date.UTC(2005,3,19), y: “Meeting 2”},
{x: Date.UTC(2006,1,1), y: “Meeting 3”}
];
var momentData2 = [
{x: Date.UTC(2004,5,12), y: “Training 1”},
{x: Date.UTC(2005,5,1), y: “Training 2”},
{x: Date.UTC(2006,1,26), y: “Training 3”}
];
// create a chart
var chart = anychart.timeline();
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
// create the first moment series
var momentSeries1 = chart.moment(momentData1);
// create the second moment series
var momentSeries2 = chart.moment(momentData2);
范围系列
范围系列用于显示具有持续时间的事件。
若要创建范围系列,请调用range()方法。在您的数据,添加name,start和end领域。
您可以调整一系列或单个范围中所有范围的高度,方向和外观,如以下小节中所述。另外,您可以配置它们的标签和工具提示-请参阅“ 标签和工具提示”部分。
所有范围
要配置范围系列,请使用以下方法:
height()设置高度
direction()设置方向
可用的路线列在anychart.enums.Direction中:
up
down
odd-even
auto
范围的外观可以配置为三种状态:正常,悬停和选中。使用normal(),hovered()和selected()方法。
结合使用anychart.core.StateSettings中的方法:
fill()设置填充
stroke()设置笔划
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// configure the first range series
rangeSeries1.height(40);
rangeSeries1.direction(“down”);
rangeSeries1.normal().fill("#ff6600");
rangeSeries1.hovered().fill("#ff6600", 0.5);
rangeSeries1.selected().fill("#004e72", 0.5);
rangeSeries1.normal().stroke("#004e72");
rangeSeries1.hovered().stroke("#004e72", 2);
rangeSeries1.selected().stroke("#004e72", 2);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
// configure the second range series
rangeSeries2.direction(“down”);
rangeSeries2.normal().fill("#00a8e0");
rangeSeries2.hovered().fill("#00a8e0", 0.5);
rangeSeries2.selected().fill("#004e72", 0.5);
rangeSeries2.normal().stroke("#004e72");
rangeSeries2.hovered().stroke("#004e72", 2);
rangeSeries2.selected().stroke("#004e72", 2);
个别范围
如果使用对象表示法设置数据,则可以分别配置每个节点。使用与上述方法相对应的额外数据字段:
// create data
var rangeData1 = [
{name: “Task 1”, start: Date.UTC(2004,0,4), end: Date.UTC(2004,7,1),
normal: {fill: “#01b53f”, stroke: “null”},
hovered: {fill: “#01b53f”, stroke: “null”},
selected: {fill: “#01b53f”, stroke: “null”}
},
{name: “Task 2”, start: Date.UTC(2004,7,1), end: Date.UTC(2005,8,10),
normal: {fill: “#ff6600”, stroke: “null”},
hovered: {fill: “#ff6600”, stroke: “null”},
selected: {fill: “#ff6600”, stroke: “null”}
}
];
var rangeData2 = [
{name: “New Task 1”, start: Date.UTC(2005,10,1), end: Date.UTC(2006,5,1),
normal: {fill: “#00a8e0”, stroke: “null”},
hovered: {fill: “#00a8e0”, stroke: “null”},
selected: {fill: “#00a8e0”, stroke: “null”}
},
{name: “New Task 2”, start: Date.UTC(2006,5,15), end: Date.UTC(2006,11,1),
normal: {fill: “#f6bc16”, stroke: “null”},
hovered: {fill: “#f6bc16”, stroke: “null”},
selected: {fill: “#f6bc16”, stroke: “null”}
}
];
// create a chart
var chart = anychart.timeline();
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);