AnyGantt是基于JavaScript的高級(jí)解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺(tái)，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡(jiǎn)單的HTML頁(yè)面。

點(diǎn)擊下載AnyGantt正式版

線

要添加線標(biāo)記，請(qǐng)使用lineMarker（）方法。指定標(biāo)記的索引：

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

• value（）設(shè)置日期
• stroke（）設(shè)置筆劃
• enabled（）啟用/禁用標(biāo)記

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

要添加范圍標(biāo)記，請(qǐng)使用rangeMarker（）方法。指定標(biāo)記的索引：

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

• from（）設(shè)置開始日期
• to（）設(shè)置結(jié)束日期
• fill（）設(shè)置填充
• enabled（）啟用/禁用標(biāo)記

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

標(biāo)簽是可以放置在任何圖表上任何位置的文本或圖像元素（您可以在整個(gè)系列或單個(gè)點(diǎn)上啟用它們）。對(duì)于文本標(biāo)簽，可以使用字體設(shè)置和文本格式器。

甲工具提示是文本時(shí)的曲線圖上的點(diǎn)懸停在顯示框。有許多可視設(shè)置和其他設(shè)置：例如，您可以使用字體設(shè)置和文本格式設(shè)置器來(lái)編輯文本，更改背景樣式，調(diào)整工具提示的位置等等。

代幣

要更改圖表的所有元素的文本，請(qǐng)將labels（）和format（）方法與tokens結(jié)合使用。
要更改工具提示的文本，請(qǐng)使用tooltip（）和format（）方法進(jìn)行相同的操作。

也可以分別調(diào)整范圍和力矩系列的標(biāo)簽和工具提示以及軸的標(biāo)簽。將這些元素的相應(yīng)方法與下面列出的標(biāo)記一起使用。

范圍系列的代幣：

• {%name} –范圍名稱
• {%seriesName} –系列名稱
• {%start} –開始日期（Unix時(shí)間戳）
• {%end} –結(jié)束日期（Unix時(shí)間戳記）

• {%seriesName} –系列名稱
• {%y} –時(shí)刻的名字
• {%x} –日期（Unix時(shí)間戳）

• {%tickValue} –刻度值（Unix時(shí)間戳記）

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

本教程未完待續(xù)，感興趣的朋友可以下載AnyGantt試用版免費(fèi)體驗(yàn)哦~更多產(chǎn)品信息請(qǐng)咨詢

EV-APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。