AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。

點擊下載AnyGantt正式版

瞬間系列

矩序列用于顯示零事件。
要創建一個矩量級數，請調用moment（）方法。在數據中，使用y和x字段。
您可以調整一系列或單個范圍內所有范圍的方向和外觀，如以下小節中所述。另外，您可以配置它們的標簽和工具提示-請參閱“ 標簽和工具提示”部分。

所有時刻

方向（）方法允許設置的時刻系列從枚舉中的一個的方向anychart.enums.Direction：

• up
• down
• odd-even
• auto

• 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應用程序。）除此之外，同時還具有一個穩定可靠的甘特圖工具，在編寫第一行代碼之前，您就可以知道是否可以滿足客戶的需求。