AnyGantt创建时间线图

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

瞬间系列

矩序列用于显示零事件。
要创建一个矩量级数，请调用moment（）方法。在数据中，使用y和x字段。
您可以调整一系列或单个范围内所有范围的方向和外观，如以下小节中所述。另外，您可以配置它们的标签和工具提示-请参阅“ 标签和工具提示”部分。

所有时刻

方向（）方法允许设置的时刻系列从枚举中的一个的方向anychart.enums.Direction：

• up
• down
• odd-even
• auto

时刻的外观及其标记以及标记的形状和大小可以配置为三种状态：正常，悬停和选定。使用normal（），hovered（）和selected（）方法。
结合使用anychart.core.StateSettings中的方法：
stroke（）设置笔划
markers（）访问标记
要调整标记，请使用以下方法：
type（）设置类型– anychart.enums.MarkerType
size（）设置大小
fill（）设置填充
stroke（）设置笔划
// create the first moment series
var momentSeries1 = chart.moment(momentData1);

// configure the first moment series
momentSeries1.direction(“down”);
momentSeries1.normal().stroke("#dd2c00", 1, “5 3”, “round”);
momentSeries1.hovered().stroke("#dd2c00", 2, “5 3”, “round”);
momentSeries1.selected().stroke("#004e72", 2, “5 3”, “round”);

// configure markers of the first moment series
momentSeries1.markers().type(“circle”);
momentSeries1.normal().markers().size(8);
momentSeries1.hovered().markers().size(8);
momentSeries1.selected().markers().size(8);
momentSeries1.normal().markers().fill("#dd2c00");
momentSeries1.hovered().markers().fill("#dd2c00");
momentSeries1.selected().markers().fill("#004e72");
momentSeries1.normal().markers().stroke("#dd2c00", 1);
momentSeries1.hovered().markers().stroke("#dd2c00", 2);
momentSeries1.selected().markers().stroke("#004e72", 2);

// create the second moment series
var momentSeries2 = chart.moment(momentData2);

// configure the second moment series
momentSeries2.direction(“down”);
momentSeries2.normal().stroke("#00bfa5", 1);
momentSeries2.hovered().stroke("#00bfa5", 2);
momentSeries2.selected().stroke("#004e72", 2);

// configure markers of the second moment series
momentSeries2.markers().type(“diamond”);
momentSeries2.normal().markers().size(8);
momentSeries2.hovered().markers().size(8);
momentSeries2.selected().markers().size(8);
momentSeries2.normal().markers().fill("#00bfa5");
momentSeries2.hovered().markers().fill("#00bfa5");
momentSeries2.selected().markers().fill("#004e72");
momentSeries2.normal().markers().stroke("#00bfa5", 1);
momentSeries2.hovered().markers().stroke("#00bfa5", 2);
momentSeries2.selected().markers().stroke("#004e72", 2);

个人时刻

如果使用对象表示法设置数据，则可以分别配置每个节点。使用与上述方法相对应的额外数据字段：

// create data

var momentData1 = [
{x: Date.UTC(2004,2,21), y: “Meeting 1”,
normal: {
marker: {
type: “star5”, size: 8,
fill: “#dd2c00”, stroke: “2 #dd2c00”
},
stroke: “2 #dd2c00”
},
hovered: {
marker: {
size: 8,
fill: “#dd2c00”, stroke: “2 #dd2c00”
},
stroke: “2 #dd2c00”
},
selected: {
marker: {
size: 8,
fill: “#dd2c00”, stroke: “2 #dd2c00”
},
stroke: “2 #dd2c00”
}
},
{x: Date.UTC(2005,3,19), y: “Meeting 2”},
{x: Date.UTC(2006,1,1), y: “Meeting 3”}
];

var momentData2 = [
{x: Date.UTC(2004,5,12), y: “Training 1”},
{x: Date.UTC(2005,5,1), y: “Training 2”},
{x: Date.UTC(2006,1,26), y: “Training 3”}
];

// create a chart
var chart = anychart.timeline();

// create the first moment series
var momentSeries1 = chart.moment(momentData1);

// create the second moment series
var momentSeries2 = chart.moment(momentData2);

轴

要配置轴的外观和其他设置，请将axis（）与以下方法结合使用：

height（）设置高度
fill（）设置填充
stroke（）设置笔划
ticks（） + stroke（）调整刻度笔划
另外，您可以调整在轴上显示的标签-请参见“ 标签和工具提示”部分。
注意：轴的外观也受比例尺设置的影响。
此示例显示如何配置轴：

// configure the axis
chart.axis().height(80);
chart.axis().fill("#00724e");
chart.axis().stroke("#004e72");
chart.axis().ticks().stroke("#00b37a", 3);

出现
您可以配置力矩和范围系列以及轴的外观。有关更多信息，请参见Moment Series，Range Series和Axis部分。

标记物

您可以在时间轴上添加三种类型的标记：线，范围和文本。以下各节详细说明了如何配置每种类型。

文本

要添加文本标记，请使用textMarker（）方法。指定标记的索引：

var textMarker1 = chart.textMarker(0);
var textMarker2 = chart.textMarker(1);
要配置标记，请使用以下方法：
value（）设置日期
text（）设置文本
useHtml（）启用HTML
fontColor（），fontFamily（），fontSize（），fontWeight（）等用于配置字体
background（）设置背景
rotation（），padding（），offsetX（）， offsetY（）等用于设置位置
enabled（）启用/禁用标记
在下面的示例中，有两个配置了字体，背景和位置的文本标记。在第一个标记的文本中，使用HTML。

// create two text markers
var textMarker1 = chart.textMarker(0);
var textMarker2 = chart.textMarker(1);

// set the values of markers
textMarker1.value(Date.UTC(2004,0,1));
textMarker2.value(Date.UTC(2005,0,1));

// set the text of markers
textMarker1.useHtml(true);
textMarker1.text(
"year: " +
anychart.format.dateTime(textMarker1.value(), “y”) +
“”);
textMarker2.text(
"year: " +
anychart.format.dateTime(textMarker2.value(), “y”)
);

// configure the font of markers
textMarker1.fontColor("#dd2c00");
textMarker2.fontColor("#00bfa5");
textMarker1.fontWeight(600);
textMarker2.fontWeight(600);

// configure the background of the first marker
textMarker1.background().enabled(true);
textMarker1.background().fill("#dd2c00", 0.2);
textMarker1.background().stroke("#dd2c00", 2);

// configure the position of markers
textMarker1.rotation(0);
textMarker1.padding(10);
textMarker1.offsetX(-95);
textMarker1.offsetY(40);
textMarker2.offsetY(10);
本教程未完待续，感兴趣的朋友可以下载AnyGantt试用版免费体验哦~更多产品信息请咨询【在线客服】>>>

EV-APS是慧都科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。

VARCHART XGantt是一个功能全面的交互式甘特图控件，其模块化的设计让您可以创建满足您和您的客户所需求的应用程序。（我们领先的甘特图控件VARCHART XGantt可用于.NET，ActiveX应用程序。）除此之外，同时还具有一个稳定可靠的甘特图工具，在编写第一行代码之前，您就可以知道是否可以满足客户的需求。