国产自产21,国产精品9,91永久视频在线

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

amCharts之JavaScript/HTML5 Charts應(yīng)用教程一：創(chuàng)建3D柱狀圖

原創(chuàng)|使用教程|編輯：郝浩|2013-03-28 15:53:23.000|閱讀 7550 次

概述：amCharts的JS圖表控件JavaScript/HTML5 Charts是移動(dòng)圖表開發(fā)利器，本文詳細(xì)介紹了如何用JavaScript/HTML5 Charts創(chuàng)建3D柱狀圖。

相關(guān)鏈接：

JavaScript/HTML5 Charts是amCharts下的一款JS圖表控件，它支持多種圖表類型和瀏覽器，是移動(dòng)圖表開發(fā)利器。今天為大家介紹一下如何用JavaScript/HTML5 Charts創(chuàng)建簡單的3D柱狀圖，以下是詳細(xì)的步驟：

創(chuàng)建一個(gè)容器

我們將這個(gè)容器命名為“chartContainer”，參考以下代碼：

<body>
    <div id="chartContainer" style="width: 640px; height: 400px;"></div>
</body>

引用JavaScript庫

在HEAD部分，引用amCharts JavaScript庫：

<script src="js/amcharts.js" type="text/javascript"></script>

添加數(shù)據(jù)

引用一組JavaScript對象：

<script type="text/javascript">
    var chartData = [{ country: "USA", visits: 4252 },
                { country: "China", visits: 1882 },
                { country: "Japan", visits: 1809 },
                { country: "Germany", visits: 1322 },
                { country: "UK", visits: 1122 },
                { country: "France", visits: 1114 },
                { country: "India", visits: 984 },
                { country: "Spain", visits: 711 },
                { country: "Netherlands", visits: 665 },
                { country: "Russia", visits: 580 },
                { country: "South Korea", visits: 443 },
                { country: "Canada", visits: 441 },
                { country: "Brazil", visits: 395 },
                { country: "Italy", visits: 386 },
                { country: "Australia", visits: 384 },
                { country: "Taiwan", visits: 338 },
                { country: "Poland", visits: 328}];
</script>

創(chuàng)建柱狀圖

首先我們需要為圖表創(chuàng)建一個(gè)AmCharts.AmSerialChart對象，設(shè)置它的dataProvider和categoryField屬性。顧名思義，dataProvider用于指定圖表的數(shù)據(jù)源，categoryField控制數(shù)據(jù)對象的字段。

var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";

接下來我們需要添加一個(gè)graph到圖表中。一個(gè)圖表可以有多個(gè)graph，但本例我們只用一個(gè)graph。指定valueField，設(shè)置type字段為“column”，這樣我們就可以創(chuàng)建一個(gè)柱狀圖了。

var graph = new AmCharts.AmGraph();
graph.valueField = "visits"
graph.type = "column";
chart.addGraph(graph);

最后調(diào)用 write()方法將圖表寫入 “chartContainer” 中：

chart.write('chartContainer');

效果圖：

amCharts,JavaScript/HTML5 Charts,3D柱狀圖

自定義軸標(biāo)簽

在上圖中，X軸上并未標(biāo)出每一列的名稱，這樣肯定不行，那我們就調(diào)整categoryAxis的gridCount屬性：

var catAxis = chart.categoryAxis;
catAxis.gridCount = chartData.length;

會(huì)得到以下結(jié)果：

amCharts,JavaScript/HTML5 Charts,3D柱狀圖

這些標(biāo)簽都擠到一起了，那我們可以嘗試用categoryAxis的labelRotation屬性將標(biāo)簽旋轉(zhuǎn)90度：

var catAxis = chart.categoryAxis;
catAxis.gridCount = chartData.length;
catAxis.labelRotation = 90;

amCharts,JavaScript/HTML5 Charts,3D柱狀圖

結(jié)果標(biāo)簽字段被截取掉了一部分，那需要設(shè)置圖表的margins：

chart.marginTop = 15;
chart.marginLeft = 55;
chart.marginRight = 15;
chart.marginBottom = 80;

這樣就沒有問題了:

amCharts,JavaScript/HTML5 Charts,3D柱狀圖

填充顏色&3D效果

首先填充柱子的顏色并隱藏它們的邊框：

graph.lineAlpha = 0;
graph.fillAlphas = 0.8;

然后將平面的柱狀圖變?yōu)?D效果，depth3D屬性控制柱子的深度和角度，也就是3D方向：

chart.angle = 30;
chart.depth3D = 15;

終于，3D柱狀圖的效果就出來了：

amCharts,JavaScript/HTML5 Charts,3D柱狀圖

怎么樣？是不是很簡單，趕緊下載JavaScript/HTML5 Charts 創(chuàng)建一個(gè)3D柱狀圖吧！

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都控件

上一篇：Aspose.Pdf使用教程：在PDF文檔中添加書簽下一篇：Stimulsoft Reports使用教程：從交叉表獲取數(shù)據(jù)

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：圖表

源碼：非開源

產(chǎn)品編號(hào)：11974

當(dāng)前版本：v4.10.15 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： AMCHARTS

正式授權(quán)

">JavaScript Charts

擁有良好兼容性的JavaScript、HTML5圖表開發(fā)工具

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

amCharts之JavaScript/HTML5 Charts應(yīng)用教程一：創(chuàng)建3D柱狀圖

創(chuàng)建一個(gè)容器

引用JavaScript庫

添加數(shù)據(jù)

創(chuàng)建柱狀圖

自定義軸標(biāo)簽

填充顏色&3D效果

用科技創(chuàng)就卓越

Create excellence with technology

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

amCharts之JavaScript/HTML5 Charts應(yīng)用教程一：創(chuàng)建3D柱狀圖

創(chuàng)建一個(gè)容器

引用JavaScript庫

添加數(shù)據(jù)

創(chuàng)建柱狀圖

自定義軸標(biāo)簽

填充顏色&3D效果

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology