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

點擊下載AnyGantt正式版

相關內容推薦：

如何使用AnyGantt創建時間線圖（一）

如何使用AnyGantt創建時間線圖（二）

如何使用AnyGantt創建時間線圖（三）

格式化功能

要配置標簽和工具提示，可以使用格式化功能和下面列出的字段。

范圍系列的功能字段：

• seriesName –系列名稱
• start –開始日期
• end –結束日期

• value –時刻的名字
• seriesName –系列名稱
• x –日期（Unix時間戳）

• tickValue –刻度值（Unix時間戳記）

下面的示例演示了如何配置標簽和工具提示以及如何使用格式化功能來格式化其文本。與常規字段一起使用自定義字段manager。

// a function for formatting labels of range series
function rangeLabelFormat() {
  return this.getData("name").toUpperCase();  
}

// format labels of range series
rangeSeries1.labels().format(rangeLabelFormat);
rangeSeries2.labels().format(rangeLabelFormat);

// configure labels of range series
rangeSeries1.labels().fontColor("#64b5f6");
rangeSeries2.labels().fontColor("#1976d2");

// a functions for formatting labels of moment series
function momentLabelFormat() {
  return this.value.toUpperCase();  
}

// format labels of moment series
momentSeries1.labels().format(momentLabelFormat);
momentSeries2.labels().format(momentLabelFormat);

// configure labels of moment series
momentSeries1.labels().width(80);
momentSeries2.labels().width(80);
momentSeries1.labels().fontColor("#96a6a6");
momentSeries2.labels().fontColor("#96a6a6");
momentSeries1.labels().background().stroke("#ffa000", 2);
momentSeries2.labels().background().stroke("#ffd54f", 2);

// format labels of the axis
chart.axis().labels().format(function(){
  return this.value.substr(2); 
});

// a function for formatting tooltips of range series
function rangeTooltipFormat() {
  var duration = (this.end - this.start) / 1000 / 3600 / 24;
  var start = anychart.format.dateTime(this.start, "dd MMM");
  var end = anychart.format.dateTime(this.end, "dd MMM");
  return "" + 
          this.getData("name").toUpperCase() + "" +
          "

Dates: " + start + " – " + end + 
          "
Duration: " + duration + " days" +
          "
Group: " + this.seriesName +
          "

Manager: " + this.getData("manager");  
}

// format tooltips of range series
rangeSeries1.tooltip().useHtml(true);
rangeSeries2.tooltip().useHtml(true); 
rangeSeries1.tooltip().format(rangeTooltipFormat);
rangeSeries2.tooltip().format(rangeTooltipFormat);

// configure tooltips of range series
rangeSeries1.tooltip().title().enabled(false);
rangeSeries2.tooltip().title().enabled(false);
rangeSeries1.tooltip().separator().enabled(false);
rangeSeries2.tooltip().separator().enabled(false);

// a function for formatting tooltips of range series
function momentTooltipFormat() {
  var date = anychart.format.dateTime(this.x, "dd MMM");
  return "" + 
          this.value.toUpperCase() + "" +
          "

Date: " + date + 
          "
Group: " + this.seriesName;
}

// format tooltips of moment series
momentSeries1.tooltip().useHtml(true);
momentSeries2.tooltip().useHtml(true); 
momentSeries1.tooltip().format(momentTooltipFormat);
momentSeries2.tooltip().format(momentTooltipFormat);

// configure tooltips of moment series
momentSeries1.tooltip().title().enabled(false);
momentSeries2.tooltip().title().enabled(false);
momentSeries1.tooltip().separator().enabled(false);
momentSeries2.tooltip().separator().enabled(false);

比例尺的設置會影響軸的外觀。配置縮放級別還影響導航和默認行為的工作方式。

基本設置
要配置比例，請將scale（）與以下方法結合使用：

• minimum（）設置比例尺的最小日期
• maximum（）設置刻度的最大日期
• financialYearStartMonth（）設置會計年度的開始月份

此示例顯示如何調整比例。軸的標簽配置為顯示會計年度的開始月份。

// set the minimum and maximum values of the scale
chart.scale().minimum(Date.UTC(2003,7,30));
chart.scale().maximum(Date.UTC(2007,5,30));

// set the starting month of the fiscal year
chart.scale().fiscalYearStartMonth(7);

// format labels of the axis
chart.axis().labels().format(
  "{%tickValue}{dateTimeFormat: MMM y}"
);

可以放大和縮小時間線圖表-例如，借助鼠標滾輪。請參閱導航和行為部分以了解更多信息。（請注意，在所有以前的示例中，縮放都是禁用的。）

您可以指定軸在每個縮放級別以及默認狀態下顯示的時間單位。將scale（）與zoomLevels（）結合使用。

縮放級別設置為對象數組。在每個對象中，應指定兩個值，unit以及count：級別的時間單位和由軸的一個刻度表示的單位數。

// set zoom levels of the scale
chart.scale().zoomLevels([
  [
    {unit: "year", count: 1},
    {unit: "month", count: 3}
  ]
]);

可用的單位可以在anychart.enums.Interval中找到：

• "millisecond"
• "second"
• "minute"
• "hour"
• "day"
• "week"
• "third-of-month"
• "month"
• "quarter"
• "semester"
• "year"

chart.scale().zoomLevels([
  [
    {"unit": "week", count: 1},
    {"unit": "month", count: 1},
    {"unit": "quarter", count: 1}
  ]
]);

默認情況下，您可以在鼠標的幫助下瀏覽時間線圖表–請參見“ 行為”部分。另外，您可以使用特殊方法，“縮放控制面板”和滾動條，如以下小節所示。

注意：縮放的方式取決于縮放比例的設置。閱讀比例尺：縮放級別以了解更多信息。

方法
使用以下方法瀏覽圖表：

• zoomTo（）縮放到日期范圍
• fit（）使圖表適合容器

// zoom the chart to the given dates
chart.zoomTo(Date.UTC(2005,3,1), Date.UTC(2006,3,1)); 
// fit the chart to the container
chart.fit();

滾動條允許滾動和縮放圖表。您可以在“ 通用設置：滾動條”文章中找到有關此元素的詳細指南。

要啟用或禁用滾動條，請將true/ 傳遞false到圖表的scroller（）方法或滾動條的enabled（）方法：

// enable the scroller
chart.scroller(true);

// enable the scroller
chart.scroller().enabled(true);

下面的示例演示如何啟用和禁用滾動條。默認情況下，借助zoomTo（） 方法將圖表放大到日期范圍。滾動條允許更改范圍。

變焦控制面板是與允許放大，縮小，和重置圖表三個按鈕的HTML對象。

它需要添加Common UI模塊：

<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-ui.min.js"></script>

<link rel="stylesheet" type="text/css" /> 

另外，您應該引用anychart-ui.min.css和anychart-font.min.css文件：

<link rel="stylesheet" type="text/css" />

// add a zoom control panel
var zoomController = anychart.ui.zoom();
zoomController.target(chart);
zoomController.render();

默認情況下，用戶可以通過拖放來滾動時間線圖表。同樣，可以使用鼠標滾輪放大和縮小圖表。（請注意，在本文的大多數示例中，縮放被禁用。）

為防止縮放，請結合使用交互性和zoomOnMouseWheel（）方法：

// prevent zooming the chart with the mouse wheel
chart.interactivity().zoomOnMouseWheel(false);

下面的示例顯示了如何禁用和啟用縮放：

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

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