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

// 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時間戳記）

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

本教程未完待續，感興趣的朋友可以下載AnyGantt試用版免費體驗哦~更多產品信息請咨詢

EV-APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。