如何使用AnyGantt创建时间线图（四）

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时间戳记）

您还可以将自定义字段添加到数据中，并使用getData（）方法对其进行引用。

下面的示例演示了如何配置标签和工具提示以及如何使用格式化功能来格式化其文本。与常规字段一起使用自定义字段manager。

// a function for formatting labels of range seriesfunction rangeLabelFormat() {  return this.getData("name").toUpperCase(); }// format labels of range seriesrangeSeries1.labels().format(rangeLabelFormat);rangeSeries2.labels().format(rangeLabelFormat);// configure labels of range seriesrangeSeries1.labels().fontColor("#64b5f6");rangeSeries2.labels().fontColor("#1976d2");// a functions for formatting labels of moment seriesfunction momentLabelFormat() {  return this.value.toUpperCase(); }// format labels of moment seriesmomentSeries1.labels().format(momentLabelFormat);momentSeries2.labels().format(momentLabelFormat);// configure labels of moment seriesmomentSeries1.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 axischart.axis().labels().format(function(){  return this.value.substr(2);});

// a function for formatting tooltips of range seriesfunction 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 seriesrangeSeries1.tooltip().useHtml(true);rangeSeries2.tooltip().useHtml(true);rangeSeries1.tooltip().format(rangeTooltipFormat);rangeSeries2.tooltip().format(rangeTooltipFormat);// configure tooltips of range seriesrangeSeries1.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 seriesfunction momentTooltipFormat() {  var date = anychart.format.dateTime(this.x, "dd MMM");  return "" +          this.value.toUpperCase() + "" +          "Date: " + date +          "Group: " + this.seriesName;}// format tooltips of moment seriesmomentSeries1.tooltip().useHtml(true);momentSeries2.tooltip().useHtml(true);momentSeries1.tooltip().format(momentTooltipFormat);momentSeries2.tooltip().format(momentTooltipFormat);// configure tooltips of moment seriesmomentSeries1.tooltip().title().enabled(false);momentSeries2.tooltip().title().enabled(false);momentSeries1.tooltip().separator().enabled(false);momentSeries2.tooltip().separator().enabled(false);

规模

比例尺的设置会影响轴的外观。配置缩放级别还影响导航和默认行为的工作方式。

基本设置
要配置比例，请将scale（）与以下方法结合使用：

• minimum（）设置比例尺的最小日期
• maximum（）设置刻度的最大日期
• financialYearStartMonth（）设置会计年度的开始月份

注意：会计年度的开始月份设置为1到12之间的一个数字。默认值为1（一月）。

此示例显示如何调整比例。轴的标签配置为显示会计年度的开始月份。

// set the minimum and maximum values of the scalechart.scale().minimum(Date.UTC(2003,7,30));chart.scale().maximum(Date.UTC(2007,5,30));// set the starting month of the fiscal yearchart.scale().fiscalYearStartMonth(7);// format labels of the axischart.axis().labels().format(  "{%tickValue}{dateTimeFormat: MMM y}");

缩放等级

可以放大和缩小时间线图表-例如，借助鼠标滚轮。请参阅导航和行为部分以了解更多信息。（请注意，在所有以前的示例中，缩放都是禁用的。）

您可以指定轴在每个缩放级别以及默认状态下显示的时间单位。将scale（）与zoomLevels（）结合使用。

缩放级别设置为对象数组。在每个对象中，应指定两个值，unit以及count：级别的时间单位和由轴的一个刻度表示的单位数。

// set zoom levels of the scalechart.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 dateschart.zoomTo(Date.UTC(2005,3,1), Date.UTC(2006,3,1));// fit the chart to the containerchart.fit();

这些方法是这样工作的：

滚动条允许滚动和缩放图表。您可以在“ 通用设置：滚动条”文章中找到有关此元素的详细指南。

要启用或禁用滚动条，请将true/ 传递false到图表的scroller（）方法或滚动条的enabled（）方法：

// enable the scrollerchart.scroller(true);

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

要配置滚动器，请使用anychart.core.ui.ChartScroller类的其他方法。

下面的示例演示如何启用和禁用滚动条。默认情况下，借助zoomTo（） 方法将图表放大到日期范围。滚动条允许更改范围。

变焦控制面板是与允许放大，缩小，和重置图表三个按钮的HTML对象。

它需要添加Common UI模块：

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

<link rel=”stylesheet” type=”text/css” href=”https://cdn.anychart.com/releases/8.7.1/css/anychart-ui.min.csscode=a0c21fc77e1449cc86299c5faa067dc4″/> 

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

<link rel=”stylesheet” type=”text/css” href=”https://cdn.anychart.com/releases/8.7.1/fonts/css/anychart-font.min.css”/>

然后将anychart.ui.zoom（）方法与target（）和render（）组合以创建面板：

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

行为

为防止缩放，请结合使用交互性和zoomOnMouseWheel（）方法：

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

注意：缩放的方式取决于缩放比例的设置。阅读比例尺：缩放级别以了解更多信息。

下面的示例显示了如何禁用和启用缩放：

本教程未完待续，感兴趣的朋友可以下载AnyGantt试用版免费体验哦~更多产品信息请咨询【在线客服】>>>

APS是科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。

想要购买AnyGantt正版授权，或了解更多产品信息请点击【咨询在线客服】 标签：