彩票走势图

如何使用AnyGantt创建时间线图(四)

翻译|使用教程|编辑:杨鹏连|2020-08-17 09:59:32.467|阅读 200 次

概述:本文介绍了如何创建格式化功能、规范、缩放等级、导航等功能。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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。

如何使用AnyGantt创建时间线图(四)
// 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()设置会计年度的开始月份
注意:会计年度的开始月份设置为1到12之间的一个数字。默认值为1(一月)。

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

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

如何使用AnyGantt创建时间线图(四)

缩放等级

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

您可以指定轴在每个缩放级别以及默认状态下显示的时间单位。将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}
  ]
]);

如何使用AnyGantt创建时间线图(四)

导航

默认情况下,您可以在鼠标的帮助下浏览时间线图表–请参见“ 行为”部分。另外,您可以使用特殊方法,“缩放控制面板”和滚动条,如以下小节所示。

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

方法
使用以下方法浏览图表:

  • 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();
这些方法是这样工作的:

如何使用AnyGantt创建时间线图(四)
滚动条

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

要启用或禁用滚动条,请将true/ 传递false到图表的scroller()方法或滚动条的enabled()方法:

// enable the scroller
chart.scroller(true);
// enable the scroller
chart.scroller().enabled(true);
要配置滚动器,请使用anychart.core.ui.ChartScroller类的其他方法。

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

如何使用AnyGantt创建时间线图(四)
缩放控制面板

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

它需要添加Common UI模块:

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

<link rel="stylesheet" type="text/css" href="//cdn.anychart.com/releases/8.7.1/css/anychart-ui.min.css?hcode=a0c21fc77e1449cc86299c5faa067dc4"/> 

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

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

然后将anychart.ui.zoom()方法与target()和render()组合以创建面板:
// add a zoom control panel
var zoomController = anychart.ui.zoom();
zoomController.target(chart);
zoomController.render();

如何使用AnyGantt创建时间线图(四)

行为


默认情况下,用户可以通过拖放来滚动时间线图表。同样,可以使用鼠标滚轮放大和缩小图表。(请注意,在本文的大多数示例中,缩放被禁用。)

为防止缩放,请结合使用交互性和zoomOnMouseWheel()方法:

// prevent zooming the chart with the mouse wheel
chart.interactivity().zoomOnMouseWheel(false);
注意:缩放的方式取决于缩放比例的设置。阅读比例尺:缩放级别以了解更多信息。


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

如何使用AnyGantt创建时间线图(四)


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

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


想要购买AnyGantt正版授权,或了解更多产品信息请点击

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP