如何使用AnyGantt创建时间线图

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

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

# 正版采购狂欢节,企业采购正当时 #

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

点击下载AnyGantt正式版

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

模组

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

<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-timeline.min.js"></script>

快速开始


要创建时间线图表,请使用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正版授权,或了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Anychart

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
title
相关厂商
相关产品
AnyGantt

基于JavaScript的高级解决方案,用于构建复杂且信息丰富的甘特图。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat