amcharts的使用

作者：zccst

amcharts，应该跟fusionCharts和HightCharts一样，是首选。

fusionCharts目前已经基本弃用。（原因是引用了很多Flash）

其实，主要也就amcharts和HightCharts。其他的还在了解中


1，后来发现中文文档真是差劲，根本解决不了我的问题。
比如，我希望饼图填满整个正方形区域。

经查询API才知道有一个radius和minRadius的属性，解决了我的问题。所以还得是官方文档啊！

原版API地址（饼图的）：
http://docs.amcharts.com/3/javascriptcharts/AmPieChart

2，还有，重新设置数据后chart.validateNow();兵没有立即生效，查询API后才发现，应该调用validateData()
两者的区别：
validateData() This method should be called after data in your data provider changed or a new array was set to dataProvider. After calling this method the chart will parse data and redraw.
validateNow() This method should be called after you changed one or more properties of any class. The chart will redraw after this method is called.
详见AmChart API：http://docs.amcharts.com/3/javascriptmaps/AmChart


3，想获取渲染之后各块的颜色值（饼图的各个组成部分）
在PHP端定义一个数组：

public $pieColors = array("#FF0F00", "#FF6600", "#FF9E01", "#FCD202", "#F8FF01", "#B0DE09", "#04D215", "#0D8ECF", "#0D52D1", "#2A0CD0", "#8A0CCF", "#CD0D74", "#754DEB", "#DDDDDD", "#999999", "#333333", "#000000", "#57032A", "#CA9726", "#990000", "#4B0C25");

并在action中传到前端 'pieColors' => $this->pieColors ;

在js端：

var pieColors = JSON.parse('<?php echo json_encode($pieColors);?>');//注意有延迟，不能直接赋值
chart.pieColors = pieColors;

在HTML中：循环每一个$index时

<?php foreach ($xxxxx as $index=>$item) {?>
<div style="width:10px;height:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:<?php echo $pieColors[$index]; ?>"></div>
<?php }?>

最终的参数：

chart = new AmCharts.AmPieChart();
chart.dataProvider = data;
chart.titleField = "name";
chart.valueField = "money";
chart.radius = 58;//minRadius最小半径，width/2,height/2中的最小值
chart.labelText = ""; //chart.labelText = "[[percents]]%";
chart.balloonText = "";//鼠标悬浮在charts时的文字
chart.pieColors = pieColors;
chart.clickSlice = function(){//取消点击事件
	return false;
}
chart.write("pieCharts");

a​m​c​h​a​r​t​s​图​表​使​用​总​结
http://wenku.baidu.com/link?url=DiECsZ1f94wkFKUmacZG44uJ4eD3OS_qYPJ6vtxGv0PQjPchXcDLVXmNCSmz1IcTLzMNloDy4sgaRC9213wuBZ5_Uly8dGIni_sfCD6xILe


如果您觉得本文的内容对您的学习有所帮助，您可以微信：