最近在项目中需要显示一个饼状图,找到了一个插件,很不错,简单易用,也支持浏览器兼容。
想用直接去官网看吧http://www.amcharts.com/,在我的项目里面用的是3d饼图,官网上有示例http://www.amcharts.com/javascript-charts/3d-pie/,源码也有。
下面是我使用过程中遇到的几个问题,总结下:
- 需要事先给定容器的高度和宽度
事先设定这个id对应容器的高宽,否则不显示
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
- 页面上默认会显示amchart by amcharts.com
使用这个插件,页面上默认显示这个,可以修改amcharts.js的源码,使其不显示。源码中搜索.com,会有这样一段代码(可能每个版本不一样)
AmCharts
.
remove
(
this
.
bbset
);
if
(
d!
=
b){//todo}
这个其实是判断当前的域名是否等于
amcharts.com,不等于就显示amchart by amcharts.com,所以将d!=b改成d==b就好了。
- AmCharts.ready(function(){});问题
源码中监听了window.onload事件,window.attachEvent("onload",AmCharts.handleLoad);,
我的项目中通过ajax异步请求饼图的渲染数据,这是先后顺序问题导致的,ajax的回调一般在window.onload后执行,结果饼图没有渲染出来。
直接去掉AmCharts.ready了,正常执行。
源码如下:
1 var chart; 2 var chartData = [ 3 { 4 "state": "胜", 5 "value": 5, 6 "color": '#cc0001' 7 }, 8 { 9 "state": "平", 10 "value": 1, 11 "color": '#009900' 12 }, 13 { 14 "state": "负", 15 "value": 4, 16 "color": '#0529c7' 17 } 18 ]; 19 // PIE CHART 20 chart = new AmCharts.AmPieChart(); 21 chart.dataProvider = chartData; 22 chart.titleField = "state"; 23 chart.valueField = "value"; 24 chart.colorField = "color"; 25 chart.outlineColor = "#FFFFFF"; 26 chart.outlineAlpha = 0.8; 27 chart.outlineThickness = 2; 28 chart.balloonText = "<b>[</b><b>[[title]]</b><b>]</b><span style='font-size:14px'>[[value]] ([[percents]]%)</span>"; 29 // this makes the chart 3D 30 chart.depth3D = 15; 31 chart.angle = 50; 32 // WRITE 33 chart.write("his_fight_chartPie");
效果: