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

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

瞬間系列

矩序列用于顯示零事件。
要?jiǎng)?chuàng)建一個(gè)矩量級(jí)數(shù)，請(qǐng)調(diào)用moment（）方法。在數(shù)據(jù)中，使用y和x字段。
您可以調(diào)整一系列或單個(gè)范圍內(nèi)所有范圍的方向和外觀，如以下小節(jié)中所述。另外，您可以配置它們的標(biāo)簽和工具提示-請(qǐng)參閱“ 標(biāo)簽和工具提示”部分。

所有時(shí)刻

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

• up
• down
• odd-even
• auto

• stroke（）設(shè)置筆劃
• markers（）訪問標(biāo)記

• type（）設(shè)置類型– anychart.enums.MarkerType
• size（）設(shè)置大小
• fill（）設(shè)置填充
• stroke（）設(shè)置筆劃

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

如果使用對(duì)象表示法設(shè)置數(shù)據(jù)，則可以分別配置每個(gè)節(jié)點(diǎn)。使用與上述方法相對(duì)應(yīng)的額外數(shù)據(jù)字段：

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

要配置軸的外觀和其他設(shè)置，請(qǐng)將axis（）與以下方法結(jié)合使用：

• height（）設(shè)置高度
• fill（）設(shè)置填充
• stroke（）設(shè)置筆劃
• ticks（） + stroke（）調(diào)整刻度筆劃

此示例顯示如何配置軸：

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

您可以配置力矩和范圍系列以及軸的外觀。有關(guān)更多信息，請(qǐng)參見Moment Series，Range Series和Axis部分。

標(biāo)記物

您可以在時(shí)間軸上添加三種類型的標(biāo)記：線，范圍和文本。以下各節(jié)詳細(xì)說明了如何配置每種類型。

文本

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

var textMarker1 = chart.textMarker(0);
var textMarker2 = chart.textMarker(1);

• value（）設(shè)置日期
• text（）設(shè)置文本
• useHtml（）啟用HTML
• fontColor（），fontFamily（），fontSize（），fontWeight（）等用于配置字體
• background（）設(shè)置背景
• rotation（），padding（），offsetX（）， offsetY（）等用于設(shè)置位置
• enabled（）啟用/禁用標(biāo)記

在下面的示例中，有兩個(gè)配置了字體，背景和位置的文本標(biāo)記。在第一個(gè)標(biāo)記的文本中，使用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);

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

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

VARCHART XGantt是一個(gè)功能全面的交互式甘特圖控件，其模塊化的設(shè)計(jì)讓您可以創(chuàng)建滿足您和您的客戶所需求的應(yīng)用程序。（我們領(lǐng)先的甘特圖控件VARCHART XGantt可用于.NET，ActiveX應(yīng)用程序。）除此之外，同時(shí)還具有一個(gè)穩(wěn)定可靠的甘特圖工具，在編寫第一行代碼之前，您就可以知道是否可以滿足客戶的需求。