AmCharts插件使用

最近在项目中需要显示一个饼状图，找到了一个插件，很不错，简单易用，也支持浏览器兼容。

想用直接去官网看吧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了，正常执行。

源码如下：

                var chart;
                var chartData = [
                    {
                        "state": "胜",
                        "value": 5,
                        "color": '#cc0001'
                    },
                    {
                        "state": "平",
                        "value": 1,
                        "color": '#009900'
                    },
                    {
                        "state": "负",
                        "value": 4,
                        "color": '#0529c7'
                    }
                ];
                // PIE CHART
                chart = new AmCharts.AmPieChart();
                chart.dataProvider = chartData;
                chart.titleField = "state";
                chart.valueField = "value";
                chart.colorField = "color";
                chart.outlineColor = "#FFFFFF";
                chart.outlineAlpha = 0.8;
                chart.outlineThickness = 2;
                chart.balloonText = "<b>[</b><b>[[title]]</b><b>]</b><span style='font-size:14px'>[[value]] ([[percents]]%)</span>";
                // this makes the chart 3D
                chart.depth3D = 15;
                chart.angle = 50;
                // WRITE
                chart.write("his_fight_chartPie");

效果：