AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。
點擊下載AnyGantt正式版
總覽
時間線圖是按時間順序可視化的事件。它既顯示占用時間段的事件（范圍），又顯示持續時間為零的事件（瞬間）。事件和日期顯示在長條形圖（軸）上。
一個甘特圖是項目管理使用時間表的一種特殊形式。
本文介紹了如何創建基本的時間線圖以及配置特定于該類型的設置。您還可以查看下表以簡要了解時間軸圖表的特征：
模組
時間線圖需要添加核心和時間線圖模塊：
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-timeline.min.js"></script>
快速開始
要創建時間線圖表，請使用anychart.timeline（）圖表構造函數。
然后調用range（）和moment（）方法來創建范圍序列和矩序列。
下面的示例演示如何創建基本的時間線圖表：
// create data
var rangeData1 = [
["Task 1", Date.UTC(2004,0,4), Date.UTC(2004,7,1)],
["Task 2", Date.UTC(2004,7,1), Date.UTC(2005,8,10)]
];
var rangeData2 = [
["New Task 1", Date.UTC(2005,10,1), Date.UTC(2006,5,1)],
["New Task 2", Date.UTC(2006,5,15), Date.UTC(2006,11,1)]
];
var momentData1 = [
[Date.UTC(2004,2,21), "Meeting 1"],
[Date.UTC(2005,3,19), "Meeting 2"],
[Date.UTC(2006,1,1), "Meeting 3"]
];
var momentData2 = [
[Date.UTC(2004,5,12), "Training 1"],
[Date.UTC(2005,5,1), "Training 2"],
[Date.UTC(2006,1,26), "Training 3"]
];
// create a chart
var chart = anychart.timeline();
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
// create the first moment series
var momentSeries1 = chart.moment(momentData1);
// create the second moment series
var momentSeries2 = chart.moment(momentData2);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
常規設置
在AnyChart中，為所有圖表類型（包括時間線圖表）以相同的方式配置了許多設置（例如，圖例和交互設置）。
特殊設定
數據
系列有兩種類型：范圍和力矩。它們的數據傳遞給range（）和moment（）方法。
如果您使用對象符號設置數據，則可以在下面找到所需的數據字段。
對于range series，請使用以下字段：
-
name 設置范圍名稱
-
start 設定開始日期
-
end 設定結束日期
對于矩系列，請使用以下字段：
注意：可以在數據中添加自定義字段-請參見本文的“ 標簽和工具提示”部分。
如果范圍重疊，則會以不同的高度繪制它們，如以下示例中的兩個第一個范圍：
// create data
var rangeData1 = [
{name: "Task 1", start: Date.UTC(2004,0,4), end: Date.UTC(2004,11,1)},
{name: "Task 2", start: Date.UTC(2004,7,1), end: Date.UTC(2005,8,10)}
];
var rangeData2 = [
{name: "New Task 1", start: Date.UTC(2005,10,1), end: Date.UTC(2006,5,1)},
{name: "New Task 2", start: Date.UTC(2006,5,15), end: Date.UTC(2006,11,1)}
];
var momentData1 = [
{x: Date.UTC(2004,2,21), y: "Meeting 1"},
{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 range series
var rangeSeries1 = chart.range(rangeData1);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
// create the first moment series
var momentSeries1 = chart.moment(momentData1);
// create the second moment series
var momentSeries2 = chart.moment(momentData2);
范圍系列
范圍系列用于顯示具有持續時間的事件。
若要創建范圍系列，請調用range（）方法。在您的數據，添加name，start和end領域。
您可以調整一系列或單個范圍中所有范圍的高度，方向和外觀，如以下小節中所述。另外，您可以配置它們的標簽和工具提示-請參閱“ 標簽和工具提示”部分。
所有范圍
要配置范圍系列，請使用以下方法：
-
height（）設置高度
-
direction（）設置方向
可用的路線列在anychart.enums.Direction中：
范圍的外觀可以配置為三種狀態：正常，懸停和選中。使用normal（），hovered（）和selected（）方法。
結合使用anychart.core.StateSettings中的方法：
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// configure the first range series
rangeSeries1.height(40);
rangeSeries1.direction("down");
rangeSeries1.normal().fill("#ff6600");
rangeSeries1.hovered().fill("#ff6600", 0.5);
rangeSeries1.selected().fill("#004e72", 0.5);
rangeSeries1.normal().stroke("#004e72");
rangeSeries1.hovered().stroke("#004e72", 2);
rangeSeries1.selected().stroke("#004e72", 2);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
// configure the second range series
rangeSeries2.direction("down");
rangeSeries2.normal().fill("#00a8e0");
rangeSeries2.hovered().fill("#00a8e0", 0.5);
rangeSeries2.selected().fill("#004e72", 0.5);
rangeSeries2.normal().stroke("#004e72");
rangeSeries2.hovered().stroke("#004e72", 2);
rangeSeries2.selected().stroke("#004e72", 2);
個別范圍
如果使用對象表示法設置數據，則可以分別配置每個節點。使用與上述方法相對應的額外數據字段：
// create data
var rangeData1 = [
{name: "Task 1", start: Date.UTC(2004,0,4), end: Date.UTC(2004,7,1),
normal: {fill: "#01b53f", stroke: "null"},
hovered: {fill: "#01b53f", stroke: "null"},
selected: {fill: "#01b53f", stroke: "null"}
},
{name: "Task 2", start: Date.UTC(2004,7,1), end: Date.UTC(2005,8,10),
normal: {fill: "#ff6600", stroke: "null"},
hovered: {fill: "#ff6600", stroke: "null"},
selected: {fill: "#ff6600", stroke: "null"}
}
];
var rangeData2 = [
{name: "New Task 1", start: Date.UTC(2005,10,1), end: Date.UTC(2006,5,1),
normal: {fill: "#00a8e0", stroke: "null"},
hovered: {fill: "#00a8e0", stroke: "null"},
selected: {fill: "#00a8e0", stroke: "null"}
},
{name: "New Task 2", start: Date.UTC(2006,5,15), end: Date.UTC(2006,11,1),
normal: {fill: "#f6bc16", stroke: "null"},
hovered: {fill: "#f6bc16", stroke: "null"},
selected: {fill: "#f6bc16", stroke: "null"}
}
];
// create a chart
var chart = anychart.timeline();
// create the first range series
var rangeSeries1 = chart.range(rangeData1);
// create the second range series
var rangeSeries2 = chart.range(rangeData2);
本教程未完待續，感興趣的朋友可以下載AnyGantt試用版免費體驗哦~更多產品信息請咨詢
EV-APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。
VARCHART XGantt是一個功能全面的交互式甘特圖控件，其模塊化的設計讓您可以創建滿足您和您的客戶所需求的應用程序。（我們領先的甘特圖控件VARCHART XGantt可用于.NET，ActiveX應用程序。）除此之外，同時還具有一個穩定可靠的甘特圖工具，在編寫第一行代碼之前，您就可以知道是否可以滿足客戶的需求。
想要購買AnyGantt正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
22次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線