翻譯|使用教程|編輯:楊鵬連|2021-01-11 10:17:01.633|閱讀 226 次
概述:AnyChart支持以下圖表類型的3D版本:面積,條形圖,柱形圖,折線圖和餅圖。這些類型的某些修改也可以在3D中繪制-請參閱“支持的類型”部分。本文介紹了如何創建和配置3D圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
AnyGantt是基于JavaScript的高級解決方案,用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺,可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。
3D圖表
AnyChart支持以下圖表類型的3D版本:面積,條形圖,柱形圖,折線圖和餅圖。這些類型的某些修改也可以在3D中繪制-請參閱“支持的類型”部分。
本文介紹了如何創建和配置3D圖表。
模組
大多數3D圖表需要添加Core和Basic 3D模塊:
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-cartesian-3d.min.js"></script>
3D Pie和Donut圖表需要將Core模塊與Pie和Donut結合使用:
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-pie.min.js"></script>
這兩個模塊包含在基本模塊中,因此也可以用于創建3D Pie和Donut圖表:
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
快速開始
要創建3D圖表,請使用以下圖表構造函數之一:
// 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圖表的列表:
APS是慧都科技15年行業經驗以及技術沉淀之作,通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程,幫助提升企業生產效率。
想要購買AnyGantt正版授權或慧都APS系統,或了解更多產品信息請點擊
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: