高清一区二区三区日本,精品国产什么乱码一区二区,国产性色亚洲大尺度视频

如何使用AnyGantt創(chuàng)建時間線圖

翻譯|使用教程|編輯：楊鵬連|2020-08-07 10:56:08.090|閱讀 582 次

概述：本文介紹了如何創(chuàng)建基本的時間線圖以及配置特定于該類型的設置。

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

總覽
時間線圖是按時間順序可視化的事件。它既顯示占用時間段的事件（范圍），又顯示持續(xù)時間為零的事件（瞬間）。事件和日期顯示在長條形圖（軸）上。
一個甘特圖是項目管理使用時間表的一種特殊形式。
本文介紹了如何創(chuàng)建基本的時間線圖以及配置特定于該類型的設置。您還可以查看下表以簡要了解時間軸圖表的特征：

模組

時間線圖需要添加核心和時間線圖模塊：

快速開始

要創(chuàng)建時間線圖表，請使用anychart.timeline（）圖表構造函數(shù)。
然后調用range（）和moment（）方法來創(chuàng)建范圍序列和矩序列。
下面的示例演示如何創(chuàng)建基本的時間線圖表：

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

常規(guī)設置

在AnyChart中，為所有圖表類型（包括時間線圖表）以相同的方式配置了許多設置（例如，圖例和交互設置）。

特殊設定

數(shù)據(jù)
系列有兩種類型：范圍和力矩。它們的數(shù)據(jù)傳遞給range（）和moment（）方法。
如果您使用對象符號設置數(shù)據(jù)，則可以在下面找到所需的數(shù)據(jù)字段。
對于range series，請使用以下字段：

name 設置范圍名稱
start 設定開始日期
end 設定結束日期

對于矩系列，請使用以下字段：

y 設置時刻名稱
x 設定日期

注意：可以在數(shù)據(jù)中添加自定義字段-請參見本文的“ 標簽和工具提示”部分。
如果范圍重疊，則會以不同的高度繪制它們，如以下示例中的兩個第一個范圍：

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

范圍系列

范圍系列用于顯示具有持續(xù)時間的事件。
若要創(chuàng)建范圍系列，請調用range（）方法。在您的數(shù)據(jù)，添加name，start和end領域。
您可以調整一系列或單個范圍中所有范圍的高度，方向和外觀，如以下小節(jié)中所述。另外，您可以配置它們的標簽和工具提示-請參閱“ 標簽和工具提示”部分。
所有范圍
要配置范圍系列，請使用以下方法：

height（）設置高度
direction（）設置方向

可用的路線列在anychart.enums.Direction中：

up
down
odd-even
auto

范圍的外觀可以配置為三種狀態(tài)：正常，懸停和選中。使用normal（），hovered（）和selected（）方法。
結合使用anychart.core.StateSettings中的方法：

fill（）設置填充
stroke（）設置筆劃

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

個別范圍
如果使用對象表示法設置數(shù)據(jù)，則可以分別配置每個節(jié)點。使用與上述方法相對應的額外數(shù)據(jù)字段：

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

本教程未完待續(xù)，感興趣的朋友可以下載 AnyGantt試用版免費體驗哦~更多產品信息請咨詢

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

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

想要購買AnyGantt正版授權，或了解更多產品信息請點擊

標簽：

本站文章除注明轉載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：

上一篇：SpreadJS v13.2 新版發(fā)布：新增Vue等框架的示例代碼下一篇：Java開發(fā)Intellij Idea定制外觀教程：如何配置顏色和字體