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了，正常执行。

源码如下：

 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");

效果：

 

 

转载于:https://www.cnblogs.com/ihuizi/p/AmCharts.html