如何使用AnyGantt创建时间线图（三）

本文介绍了如何创建瞬间系列和个人时刻，以及配置外观。

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

AnyGantt正式版

线

要添加线标记，请使用lineMarker（）方法。指定标记的索引：

var lineMarker1 = chart.lineMarker(0);var lineMarker2 = chart.lineMarker(1);

要配置标记，请使用以下方法：

• value（）设置日期
• stroke（）设置笔划
• enabled（）启用/禁用标记

在此示例中，有两个配置了笔画的线标记和绑定到它们的两个文本标记：

// create two line markersvar lineMarker1 = chart.lineMarker(0);var lineMarker2 = chart.lineMarker(1);// set values of markerslineMarker1.value(Date.UTC(2004,0,1));lineMarker2.value(Date.UTC(2005,0,1));// set the stroke of markerslineMarker1.stroke("#dd2c00", 3);lineMarker2.stroke("#00bfa5", 3, "10 5", "round");// create two text markersvar textMarker1 = chart.textMarker(0);var textMarker2 = chart.textMarker(1);// get the values of line markersvar lineMarker1Value = lineMarker1.value()var lineMarker2Value = lineMarker2.value();// set the values of text markerstextMarker1.value(lineMarker1Value);textMarker2.value(lineMarker2Value);

若要添加今天标记（在当前数据上显示的行标记），请使用todayMarker（）方法。要配置它，请使用上面列出的线标记的方法。
在以下示例中，创建并配置了今日标记，并将文本标记绑定到该标记：

// create and configure a today markervar todayMarker = chart.todayMarker();todayMarker.stroke("#dd2c00", 3);// create a text markervar textMarker = chart.textMarker(0);var todayMarkerValue = todayMarker.value();textMarker.value(todayMarkerValue);

范围

要添加范围标记，请使用rangeMarker（）方法。指定标记的索引：

var rangeMarker1 = chart.rangeMarker(0);var rangeMarker2 = chart.rangeMarker(1);

要配置标记，请使用以下方法：

• from（）设置开始日期
• to（）设置结束日期
• fill（）设置填充
• enabled（）启用/禁用标记

在下面的示例中，有两个配置了填充的范围标记和两个绑定到它们的文本标记：

// create two range markersvar rangeMarker1 = chart.rangeMarker(0);var rangeMarker2 = chart.rangeMarker(1);// set the range of the first markerrangeMarker1.from(Date.UTC(2004,0,1));rangeMarker1.to(Date.UTC(2005,0,1));// set the range of the second markerrangeMarker2.from(Date.UTC(2005,0,1));rangeMarker2.to(Date.UTC(2006,0,1));// set the fill of markersrangeMarker1.fill("#dd2c00", 0.2);rangeMarker2.fill("#00bfa5", 0.2);// create two text markersvar textMarker1 = chart.textMarker(0);var textMarker2 = chart.textMarker(1);// get the 'from' values of line markersvar rangeMarker1FromValue = rangeMarker1.from()var rangeMarker2FromValue = rangeMarker2.from();// set the values of text markerstextMarker1.value(rangeMarker1FromValue);textMarker2.value(rangeMarker2FromValue);

标签和工具提示

标签是可以放置在任何图表上任何位置的文本或图像元素（您可以在整个系列或单个点上启用它们）。对于文本标签，可以使用字体设置和文本格式器。

甲工具提示是文本时的曲线图上的点悬停在显示框。有许多可视设置和其他设置：例如，您可以使用字体设置和文本格式设置器来编辑文本，更改背景样式，调整工具提示的位置等等。

代币

要更改图表的所有元素的文本，请将labels（）和format（）方法与tokens结合使用。
要更改工具提示的文本，请使用tooltip（）和format（）方法进行相同的操作。

也可以分别调整范围和力矩系列的标签和工具提示以及轴的标签。将这些元素的相应方法与下面列出的标记一起使用。

范围系列的代币：

• {%name} –范围名称
• {%seriesName} –系列名称
• {%start} –开始日期（Unix时间戳）
• {%end} –结束日期（Unix时间戳记）

当前系列的代币：

• {%seriesName} –系列名称
• {%y} –时刻的名字
• {%x} –日期（Unix时间戳）

轴令牌：

• {%tickValue} –刻度值（Unix时间戳记）

此外，您始终可以向数据添加自定义字段，并使用与之对应的自定义标记。
以下示例显示了如何配置标签和工具提示以及如何使用标记来格式化其文本。与常规令牌一起使用自定义令牌{%manager}。

// format labels of range seriesvar rangeLabelFormat =  "{%start}{dateTimeFormat:MMM} – {%end}{dateTimeFormat:MMM}";rangeSeries1.labels().format(rangeLabelFormat);rangeSeries2.labels().format(rangeLabelFormat);// configure labels of range seriesrangeSeries1.labels().fontColor("#64b5f6");rangeSeries2.labels().fontColor("#1976d2");// format labels of moment seriesvar momentLabelFormat = "{%x}{dateTimeFormat:dd MMM}";momentSeries1.labels().format(momentLabelFormat);momentSeries2.labels().format(momentLabelFormat);// configure labels of moment seriesmomentSeries1.labels().width(50);momentSeries2.labels().width(50);momentSeries1.labels().fontColor("#96a6a6");momentSeries2.labels().fontColor("#96a6a6");momentSeries1.labels().background().stroke("#ffa000", 2);momentSeries2.labels().background().stroke("#ffd54f", 2);//format labels of the axischart.axis().labels().format(  "{%tickValue}{dateTimeFormat:MMM y}");// format tooltips of range seriesvar rangeTooltipFormat =  "" +  "{%name} Dates: " +  "{%start}{dateTimeFormat:dd MMM} – " +  "{%end}{dateTimeFormat:dd MMM}" +  "Group: {%seriesName}Manager: {%manager}";rangeSeries1.tooltip().useHtml(true);rangeSeries2.tooltip().useHtml(true);rangeSeries1.tooltip().format(rangeTooltipFormat);rangeSeries2.tooltip().format(rangeTooltipFormat);// configure tooltips of range seriesrangeSeries1.tooltip().title().enabled(false);rangeSeries2.tooltip().title().enabled(false);rangeSeries1.tooltip().separator().enabled(false);rangeSeries2.tooltip().separator().enabled(false);// format tooltips of moment seriesvar momentTooltipFormat =  "" +  "{%y} Date: {%x}{dateTimeFormat:dd MMM}" +  "Group: {%seriesName}";momentSeries1.tooltip().useHtml(true);momentSeries2.tooltip().useHtml(true);momentSeries1.tooltip().format(momentTooltipFormat);momentSeries2.tooltip().format(momentTooltipFormat);// configure tooltips of moment seriesmomentSeries1.tooltip().title().enabled(false);momentSeries2.tooltip().title().enabled(false);momentSeries1.tooltip().separator().enabled(false);momentSeries2.tooltip().separator().enabled(false);

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

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

想要购买AnyGantt正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：

来源：慧都