amcharts图形组件的使用
在实际项目中需要柱状图，折线图等。早期使用Excel实现图形报表，但是开发比较复杂。目前有很多图形报表框架可用，下面介绍amcharts的使用：
1.下载
在官网下载得到以下文件
2.文件目录结构
解压看到以下目录结构 在samples文件夹里面有很多的html文件 每个html是一个图表，可通过浏览器预览。选择自己需要的使用，这里我选择pieSimple.html，这是一个饼图。
3.项目中如何使用
1).将pieSimple.html文件直接复制进项目里，要使用还得修改一些地方。下面引入的这些js文件需要将路径修改为正确的文件路径。
<script src="../../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../../amcharts/pie.js" type="text/javascript"></script>
<script src="../../jquery-1.2.6.js" type="text/javascript"></script>
2).下面是源码，可以看到charData是一个json格式的数据。***AmCharts.ready(function () {}）；***，就是在画图。
<script>
var chart;
var legend;
var chartData = [{
country: "Czech Republic",
litres: 301.90
}, {
country: "Ireland",
litres: 201.10
}, {
country: "Germany",
litres: 165.80
}, {
country: "Australia",
litres: 139.90
}, {
country: "Austria",
litres: 128.30
}, {
country: "UK",
litres: 99.00
}, {
country: "Belgium",
litres: 60.00
}];
AmCharts.ready(function () {
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
chart.write("chartdiv");
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
可以通过ajax请求服务器，在数据库取出需要的值封装成json字符串返回给浏览器页面。将传回的值value赋给chart.dataProvider ，chart.titleField和chart.valueField分别代表横纵坐标轴的名字。里面其他内容可具体去试试作用。
AmCharts.ready(function () {
//发ajax
$.ajax({
url:'statCharAction_getFactorysaleData',
dataType:'json',
type:'get',
success:function(value){
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = value;
chart.titleField = "factoryName";
chart.valueField = "amount";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
// WRITE
chart.write("chartdiv");
}
