甘特图：AnyGantt创建时间线图教程

总览

时间线图是按时间顺序可视化的事件。它既显示占用时间段的事件（范围），又显示持续时间为零的事件（瞬间）。事件和日期显示在长条形图（轴）上。
一个甘特图是项目管理使用时间表的一种特殊形式。
本文介绍了如何创建基本的时间线图以及配置特定于该类型的设置。您还可以查看下表以简要了解时间轴图表的特征：

模组

时间线图需要添加核心和时间线图模块：

快速开始

要创建时间线图表，请使用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);