前面介绍了利用amcharts插件生成3D饼状图的方法,今天给大家介绍下生成柱状图的方法,主要是amcharts中一些方法以及属性的运用,代码也很简单。
先看效果图:
源代码
<script type="text/javascript"> $(document).ready(function(e) { GetSerialChart(); }); var json=[ {"name":"数据1","value":"35"}, {"name":"数据2","value":"60"}, {"name":"数据3","value":"22"}, {"name":"数据4","value":"65"}, {"name":"数据5","value":"35"}, {"name":"数据6","value":"22"}, {"name":"数据7","value":"43"}, {"name":"数据8","value":"55"} ] //柱状图 function GetSerialChart(){ chart = new AmCharts.AmSerialChart(); chart.dataProvider = json; //json数据的key chart.categoryField = "name"; //不选择 chart.rotate = false; //值越大柱状图面积越大 chart.depth3D = 20; //柱子旋转角度角度 chart.angle = 30; var mCtCategoryAxis = chart.categoryAxis; mCtCategoryAxis.axisColor = "#efefef"; //背景颜色透明度 mCtCategoryAxis.fillAlpha = 0.5; //背景边框线透明度 mCtCategoryAxis.gridAlpha = 0; mCtCategoryAxis.fillColor = "#efefef"; var valueAxis = new AmCharts.ValueAxis(); //左边刻度线颜色 valueAxis.axisColor = "#ccc"; //标题 valueAxis.title = "3D柱状图Demo"; //刻度线透明度 valueAxis.gridAlpha = 0.2; chart.addValueAxis(valueAxis); var graph = new AmCharts.AmGraph(); graph.title = "value"; graph.valueField = "value"; graph.type = "column"; //鼠标移入提示信息 graph.balloonText = "测试数据[[category]] [[value]]"; //边框透明度 graph.lineAlpha =0.3; //填充颜色 graph.fillColors = "#b9121b"; graph.fillAlphas = 1; chart.addGraph(graph); //显示在Main div中 chart.write("Main"); } </script>
效果演示:http://www.pengyaou.com/LegendsZ/eg/SerialChart/
实例下载:http://www.pengyaou.com/LegendsZ/eg/SerialChart/SerialChart.rar
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Js生成3D柱状图,html3D柱状图,amcharts柱状图生成方法
文章固定链接:https://www.pengyaou.com/homeart/NDg=.html
上一篇 舌尖中国之家常
下一篇 Flex Menu组件