如何使用AnyGantt创建垂直图

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

AnyGantt正式版

总览

在AnyChart中，您可以通过切换轴的方向以垂直方向绘制图表。大多数类型的系列都支持此功能-请参阅“ 支持的类型”部分。

快速开始

要创建垂直图表，请使用以下三个图表构造函数之一：

• anychart.vertical（）
• anychart.verticalArea（）
• anychart.verticalLine（）
• anychart.bar（）

它们之间没有本质区别：它们只是切换轴的方向，垂直绘制X轴，水平绘制Y轴。

在下面的示例中，由splineArea（）和spline（）方法创建了两个系列，即Spline Area和Spline，图表构造函数为anychart.vertical（）：

// create a data setvar data = anychart.data.set([  ["January", 10000, 12500],  ["February", 12000, 15000],  ["March", 13000, 16500],  ["April", 10000, 13000],  ["May", 9000, 11000]]);// map the datavar seriesData_1 = data.mapAs({x: 0, value: 1});var seriesData_2 = data.mapAs({x: 0, value: 2});// create a chartchart = anychart.vertical();// create the first series (bar)var series1 = chart.splineArea(seriesData_1);// create the second series (spline)var series2 = chart.spline(seriesData_2);// set the container idchart.container("container");// initiate drawing the chartchart.draw();

即时切换

系列

创建序列后，可以通过调用isVertical（）方法并将其参数设置为trueor 来即时更改其方向false（例如，这是Line系列的isVertical（）方法）。

注意：此设置仅影响系列，而不影响轴。

在以下示例中，此方法用于在同一图表上绘制两个水平（区域）和垂直（条形）序列：

// create a chartchart = anychart.area();// create the first seriesvar series1 = chart.area(seriesData_1);// create the second seriesvar series2 = chart.area(seriesData_2);// create the third seriesvar series2 = chart.column(seriesData_3);// change the orientation of the third series to verticalchart.getSeriesAt(2).isVertical(true);

图表

要使用基本的笛卡尔图表即时切换整个图表的方向，您可以简单地使用isVertical（）方法。

// create a chartchart = anychart.line();// change the orientation of the chartchart.isVertical(true);

支持的类型

以下是受支持的垂直图表的列表：

• 条形（垂直列）
• 范围栏（垂直列）
• 垂直面积
• 立式吧台
• 立式盒
• 垂直气泡
• 立式日本烛台
• 垂直跳线
• 垂直HiLo
• 垂线
• 垂直标记
• 垂直梅科
• 垂直马赛克
• 垂直OHLC
• 垂直范围
• 垂直范围样条区域
• 垂直范围步进面积
• 垂直花键
• 垂直花键面积
• 垂直台阶面积
• 垂直阶梯线
• 立杆

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

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

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

标签：