利用amcharts.js来生成漂亮的3D饼状图。
1.引入amcharts.js
//引入需要的amcharts文件,可以直接引入官网的文件,也可以下载到本地
2.生成数据,这里就假设一个json格式的数据
var json=[ {"name":"数据1","value":"35"}, {"name":"数据2","value":"60"}, {"name":"数据3","value":"5"}, {"name":"数据4","value":"22"}, {"name":"数据5","value":"22"} ]
3.生成饼状图
//根据json数据生成饼状图,并将饼状图显示到div中 function MakeChart(value) { chartData = eval(value); //饼状图 chart = new AmCharts.AmPieChart(); chart.dataProvider = chartData; //标题数据 chart.titleField = "name"; //值数据 chart.valueField = "value"; //边框线颜色 chart.outlineColor = "#fff"; //边框线的透明度 chart.outlineAlpha = .8; //边框线的狂宽度 chart.outlineThickness = 1; chart.depth3D = 20; chart.angle = 30; chart.write("mainDiv"); }
实例演示:http://www.pengyaou.com/LegendsZ/eg/chart.html
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Js生成3D饼状图,amcharts使用,javascript生成饼状图
文章固定链接:https://www.pengyaou.com/homeart/Mzk=.html
上一篇 Flex与C的UDP通信
下一篇 智能手机混乱的时代