建立和配置3D圖表教程

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

點擊下載AnyGantt正式版

3D圖表

AnyChart支持如下圖表類型的3D版本：面積，條形圖，柱形圖，折線圖和餅圖。這些類型的某些修改也能夠在3D中繪製-請參閱「支持的類型」部分。

本文介紹瞭如何建立和配置3D圖表。

模組

大多數3D圖表須要添加Core和Basic 3D模塊：
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>;
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-cartesian-3d.min.js"></script>;

3D Pie和Donut圖表須要將Core模塊與Pie和Donut結合使用：

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>;
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-pie.min.js"></script>;

這兩個模塊包含在基本模塊中，所以也能夠用於建立3D Pie和Donut圖表：

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>;

快速開始

要建立3D圖表，請使用如下圖表構造函數之一：
anychart.area3d（）
anychart.bar3d（）
anychart.column3d（）
anychart.pie3d（）
anychart.line3d（）
您能夠將數據傳遞到圖表構造函數，也能夠使用如下方法之一建立一系列數據：
area()
bar()
column()
line()
line2d()
它是這樣的：
// create data
var data = [
["January", 10000],
["February", 12000],
["March", 18000],
["April", 11000],
["May", 9000]
];

// create a 3d column chart
chart = anychart.column3d();

// create a column series and set the data
var series = chart.column(data);

// set the container id
chart.container("container");

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

特殊設定
Z-Angle

能夠從不一樣的角度顯示3D圖表：要設置角度，請對除3D Pie之外的任何3D圖表使用zAngle（）方法。
注意：用做參數的值應在0到90的範圍內。默認狀況下，角度爲45°。
在如下示例中，有一個3D柱形圖，其Z角設置爲20°。
// configure the z-angle of the chart
chart.zAngle(20);

Z-Aspect

3D圖表的深度可能有所不一樣：要進行設置，請對除3D Pie以外的任何3D圖表使用zAspect（）方法。

注意：能夠設置深度（以像素（數字值）或百分比（字符串值））。

在下面的示例中，有一個3D柱形圖，其Z縱橫比設置爲100％（還配置了Z角）：
// configure the z-aspect of the chart
chart.zAspect("100%"");
Z分佈
一系列多系列3D圖表能夠沿Z軸或沿X軸分佈。

要啓用或禁用Z軸分佈，請調用zDistribution（）方法並使用true或false做爲參數（禁用Z軸分佈時，序列會沿X軸分佈）。

默認分佈取決於您使用的圖表構造函數。對於anychart.bar3d（）和anychart.column3d（），它是X分佈。對於anychart.area3d（）和anychart.line3d（），它是Z分佈。

這是啓用了Z軸分佈的示例3D柱形圖：

// create a 3d column chart
chart = anychart.column3d();

// enable the z-axis distribution
chart.zDistribution(true);

// create series (column) and set the data
var series1 = chart.column(seriesData_1);
var series2 = chart.column(seriesData_2);
var series3 = chart.column(seriesData_3);

支持的類型

如下是受支持的3D圖表的列表：
3D區域
3D欄
3D柱
3D甜甜圈
3D派
3D線
3D 2D線
對本教程感興趣的朋友能夠下載AnyGantt試用版免費體驗哦~更多產品信息請諮詢【在線客服】>>>
APS是慧都科技15年行業經驗以及技術沉澱之做，經過鏈接企業接單、採購、製造、倉儲物流等整個供應鏈流程，幫助提高企業生產效率。

想要購買AnyGantt正版受權或慧都APS系統，或瞭解更多產品信息請點擊【諮詢在線客服】