Amcharts插件实现3D饼图
生活随笔
收集整理的這篇文章主要介紹了
Amcharts插件实现3D饼图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
主要引入兩個(gè)js文件：
pie.js和amcharts.js
實(shí)現(xiàn)的效果如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>amCharts examples</title><link rel="stylesheet" href="style.css" type="text/css"><script src="amcharts/amcharts.js" type="text/javascript"></script><script src="amcharts/pie.js" type="text/javascript"></script><script type="text/javascript">var chart;var chartData = [{"country": "大寶","visits": 6000},{"country": "二寶","visits": 1882},{"country": "三寶","visits": 1809},{"country": "四寶","visits": 1322},{"country": "五寶","visits": 1122},{"country": "六寶","visits": 1114},{"country": "七寶","visits": 984},{"country": "八寶","visits": 711}];AmCharts.ready(function () {// PIE CHARTchart = new AmCharts.AmPieChart();// title of the chartchart.addTitle("寶寶們隨著年齡增長的小秘密", 16);chart.dataProvider = chartData;chart.titleField = "country"; //分類類別項(xiàng)chart.valueField = "visits"; //比例值chart.sequencedAnimation = true;chart.startEffect = "elastic";chart.innerRadius = "30%";chart.startDuration =2; //餅圖的渲染時(shí)間，時(shí)間越長，動畫越長，展示的準(zhǔn)備時(shí)間越久chart.labelRadius = 10; //餅圖上標(biāo)簽，值越大，餅圖越小，說明的標(biāo)簽指示線越長chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";// the following two lines makes the chart 3Dchart.depth3D = 10; //3D效果的立體度 ，值越大立體感越強(qiáng)chart.angle = 20; //角度占的分額基數(shù)，值大則顯示的餅圖倍數(shù)就會擴(kuò)大，但是值不能超過限定的最大值，否則會變小// WRITE chart.write("chartdiv");});</script></head><body><div id="chartdiv" style="width:600px; height:400px;"></div></body></html>?
轉(zhuǎn)載于:https://my.oschina.net/u/3544533/blog/1609222
總結(jié)
以上是生活随笔為你收集整理的Amcharts插件实现3D饼图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机三定律总结
- 下一篇： buf.readInt32LE函数详解