AnyGantt是基于JavaScript的高級(jí)解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺(tái)，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡(jiǎn)單的HTML頁(yè)面。

點(diǎn)擊下載AnyGantt正式版

總覽

在AnyChart中，您可以通過(guò)切換軸的方向以垂直方向繪制圖表。大多數(shù)類型的系列都支持此功能-請(qǐng)參閱“ 支持的類型”部分。

本文介紹了如何創(chuàng)建垂直圖表以及如何動(dòng)態(tài)更改圖表的方向。

快速開(kāi)始

要?jiǎng)?chuàng)建垂直圖表，請(qǐng)使用以下三個(gè)圖表構(gòu)造函數(shù)之一：

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

您可以將數(shù)據(jù)傳遞到圖表構(gòu)造函數(shù)以創(chuàng)建一系列相同類型的數(shù)據(jù)。或者，您可以手動(dòng)指定系列類型。如果系列的類具有isVertical（）方法，則該系列支持垂直方向。例如，這是Line系列的isVertical（）方法。您還可以查看本文的“ 支持的類型”部分。

在下面的示例中，由splineArea（）和spline（）方法創(chuàng)建了兩個(gè)系列，即Spline Area和Spline，圖表構(gòu)造函數(shù)為anychart.vertical（）：

// create a data set
var data = anychart.data.set([
  ["January", 10000, 12500],
  ["February", 12000, 15000],
  ["March", 13000, 16500],
  ["April", 10000, 13000],
  ["May", 9000, 11000]
]);

// map the data
var seriesData_1 = data.mapAs({x: 0, value: 1});
var seriesData_2 = data.mapAs({x: 0, value: 2});

// create a chart
chart = 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 id
chart.container("container");

// initiate drawing the chart
chart.draw();

系列

創(chuàng)建序列后，可以通過(guò)調(diào)用isVertical（）方法并將其參數(shù)設(shè)置為trueor 來(lái)即時(shí)更改其方向false（例如，這是Line系列的isVertical（）方法）。

注意：此設(shè)置僅影響系列，而不影響軸。

在以下示例中，此方法用于在同一圖表上繪制兩個(gè)水平（區(qū)域）和垂直（條形）序列：

// create a chart
chart = anychart.area();

// create the first series
var series1 = chart.area(seriesData_1);

// create the second series
var series2 = chart.area(seriesData_2);

// create the third series
var series2 = chart.column(seriesData_3);

// change the orientation of the third series to vertical
chart.getSeriesAt(2).isVertical(true);

要使用基本的笛卡爾圖表即時(shí)切換整個(gè)圖表的方向，您可以簡(jiǎn)單地使用isVertical（）方法。

// create a chart
chart = anychart.line();

// change the orientation of the chart
chart.isVertical(true);

支持的類型

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

• 條形（垂直列）
• 范圍欄（垂直列）
• 垂直面積
• 立式吧臺(tái)
• 立式盒
• 垂直氣泡
• 立式日本燭臺(tái)
• 垂直跳線
• 垂直HiLo
• 垂線
• 垂直標(biāo)記
• 垂直梅科
• 垂直馬賽克
• 垂直O(jiān)HLC
• 垂直范圍
• 垂直范圍樣條區(qū)域
• 垂直范圍步進(jìn)面積
• 垂直花鍵
• 垂直花鍵面積
• 垂直臺(tái)階面積
• 垂直階梯線
• 立桿

APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過(guò)連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。