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);