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 markers
var lineMarker1 = chart.lineMarker(0);
var lineMarker2 = chart.lineMarker(1);

// set values of markers
lineMarker1.value(Date.UTC(2004,0,1));
lineMarker2.value(Date.UTC(2005,0,1));

// set the stroke of markers
lineMarker1.stroke("#dd2c00", 3);
lineMarker2.stroke("#00bfa5", 3, “10 5”, “round”);
// create two text markers
var textMarker1 = chart.textMarker(0);
var textMarker2 = chart.textMarker(1);

// get the values of line markers
var lineMarker1Value = lineMarker1.value()
var lineMarker2Value = lineMarker2.value();

// set the values of text markers
textMarker1.value(lineMarker1Value);
textMarker2.value(lineMarker2Value);
若要添加今天标记（在当前数据上显示的行标记），请使用todayMarker（）方法。要配置它，请使用上面列出的线标记的方法。
在以下示例中，创建并配置了今日标记，并将文本标记绑定到该标记：
// create and configure a today marker
var todayMarker = chart.todayMarker();
todayMarker.stroke("#dd2c00", 3);
// create a text marker
var 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 markers
var rangeMarker1 = chart.rangeMarker(0);
var rangeMarker2 = chart.rangeMarker(1);

// set the range of the first marker
rangeMarker1.from(Date.UTC(2004,0,1));
rangeMarker1.to(Date.UTC(2005,0,1));

// set the range of the second marker
rangeMarker2.from(Date.UTC(2005,0,1));
rangeMarker2.to(Date.UTC(2006,0,1));

// set the fill of markers
rangeMarker1.fill("#dd2c00", 0.2);
rangeMarker2.fill("#00bfa5", 0.2);
// create two text markers
var textMarker1 = chart.textMarker(0);
var textMarker2 = chart.textMarker(1);

// get the ‘from’ values of line markers
var rangeMarker1FromValue = rangeMarker1.from()
var rangeMarker2FromValue = rangeMarker2.from();

// set the values of text markers
textMarker1.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 series
var rangeLabelFormat =
“{%start}{dateTimeFormat:MMM} – {%end}{dateTimeFormat:MMM}”;
rangeSeries1.labels().format(rangeLabelFormat);
rangeSeries2.labels().format(rangeLabelFormat);

// configure labels of range series
rangeSeries1.labels().fontColor("#64b5f6");
rangeSeries2.labels().fontColor("#1976d2");

// format labels of moment series
var momentLabelFormat = “{%x}{dateTimeFormat:dd MMM}”;
momentSeries1.labels().format(momentLabelFormat);
momentSeries2.labels().format(momentLabelFormat);

// configure labels of moment series
momentSeries1.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 axis
chart.axis().labels().format(
“{%tickValue}{dateTimeFormat:MMM y}”
);
// format tooltips of range series
var 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 series
rangeSeries1.tooltip().title().enabled(false);
rangeSeries2.tooltip().title().enabled(false);
rangeSeries1.tooltip().separator().enabled(false);
rangeSeries2.tooltip().separator().enabled(false);

// format tooltips of moment series
var 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 series
momentSeries1.tooltip().title().enabled(false);
momentSeries2.tooltip().title().enabled(false);
momentSeries1.tooltip().separator().enabled(false);
momentSeries2.tooltip().separator().enabled(false);