永利最大(官方)网站

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年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。