如何使用AnyGantt创建时间线图-控件新闻-慧都网

如何使用AnyGantt创建时间线图

翻译|使用教程|编辑：杨鹏连|2020-08-07 10:56:08.090|阅读 511 次

概述：本文介绍了如何创建基本的时间线图以及配置特定于该类型的设置。

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

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

模组

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

快速开始

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

本教程未完待续，感兴趣的朋友可以下载 AnyGantt试用版免费体验哦~更多产品信息请咨询

EV-APS是慧都科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。

VARCHART XGantt是一个功能全面的交互式甘特图控件，其模块化的设计让您可以创建满足您和您的客户所需求的应用程序。（我们领先的甘特图控件VARCHART XGantt可用于.NET，ActiveX应用程序。）除此之外，同时还具有一个稳定可靠的甘特图工具，在编写第一行代码之前，您就可以知道是否可以满足客户的需求。

想要购买AnyGantt正版授权，或了解更多产品信息请点击

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自：

上一篇：SpreadJS v13.2 新版发布：新增Vue等框架的示例代码下一篇：Java开发Intellij Idea定制外观教程：如何配置颜色和字体