`
musicbox95351
  • 浏览: 220802 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

amcharts js 制作柱状统计图和饼图

 
阅读更多
amcharts js制作图表还是比较方便的。尤其是纯客户端页面。远程调用时返回的结果需要转成数组，稍稍有些麻烦。

下面是使用步骤：
1 下载amcharts_2.7.3.zip
2  将amcharts文件夹拷到工程中。(连同images文件夹，amcharts.js文件一起)
3  参考官方文档编写页面。以jsp为例，代码如下： 
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>amChart示例</title>
<!-- 注意以下路径根据实际情况修改 -->
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/amcharts/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">

var chart;
var chartType = "column";//柱状图
var chartData = [{
    year: 2005,
    income: 23.5
}, {
    "year": 2006,
    income: 26.2
}, {
    year: 2007,
    income: 30.1
}, {
    year: 2008,
    income: 29.5
}, {
    year: 2009,
    income: 24.6
}];

//var chartData ;

$(document).ready(function() {
	$.ajax({
		   type: "GET",
		   url: "远程地址如:http://localhost:8080/amchartdata.action",
		   success: function(msg){
		   //这里认为msg为json对象
		   //需要将json对象转换成类似上面的chartData变量的数组
		   	var list = [];
		     for(var k in msg){
				var data = {};
				for(var k2 in msg[k]){
					data[k2] = msg[k][k2];
				}
				list.push(data);
			 }

		     chartData = list;
		     createChart();
		   }
		});
	//如果是静态的数据，直接调用createChart();使用chartData变量。上面的远程调用去掉。
	//createChart();
});
//创建柱状图
function createChart(){
	    // SERIAL CHART
	   chart = new AmCharts.AmSerialChart();
	    chart.dataProvider = chartData;
	    chart.categoryField = "year";
	    // this single line makes the chart a bar chart, 
	    // try to set it to false - your bars will turn to columns                
	    chart.rotate = true;
	    // the following two lines makes chart 3D
	    chart.depth3D = 20;
	    chart.angle = 30;
	
	    // AXES
	    // Category
	    var categoryAxis = chart.categoryAxis;
	    categoryAxis.gridPosition = "start";
	    categoryAxis.axisColor = "#DADADA";
	    categoryAxis.fillAlpha = 1;
	    categoryAxis.gridAlpha = 0;
	    categoryAxis.fillColor = "#FAFAFA";
	
	    // value
	    var valueAxis = new AmCharts.ValueAxis();
	    valueAxis.axisColor = "#DADADA";
	    valueAxis.title = "	xx统计图";
	    valueAxis.gridAlpha = 0.1;
	    chart.addValueAxis(valueAxis);
	
	    // GRAPH
	    var graph = new AmCharts.AmGraph();
	    graph.title = "Income";
	    graph.valueField = "income";
	    graph.type = "column";
	    //graph.balloonText = "Income in [[category]]:[[value]]";
	    graph.balloonText = "Income in [[category]]:[[value]]";
	    graph.lineAlpha = 0;
	    graph.fillColors = "#bf1c25";
	    graph.fillAlphas = 1;
	    chart.addGraph(graph);
	
	    // WRITE
	    chart.write("chartdiv");
}
//创建饼图
function createPieChart(){
	chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "year";
    chart.valueField = "income";
    chart.outlineColor = "#FFFFFF";
    chart.labelsEnabled = false;
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;

 // LEGEND
    legend = new AmCharts.AmLegend();
    legend.align = "center";
    legend.markerType = "circle";
    chart.addLegend(legend);
    
    // WRITE
    chart.write("chartdiv");
}
//图形转换
function switchChartType(){
	$("#chartdiv").html("");
	if(chartType=="column"){
		createPieChart();
		chartType = "pie";
	}else{
		createChart();
		chartType = "column";
	}

}
</script>
</head>
<body>
	<div id="chartdiv" style="width: 300px; height: 400px;"></div>
	<div><input type="button" value="图形切换" onclick="switchChartType()"></input></div>
</body>
</html>


数据对象 
package com.musicbox.chart;

public class Data {
	private String year;
	private float income;

	public String getYear() {
		return year;
	}

	public void setYear(String year) {
		this.year = year;
	}

	public float getIncome() {
		return income;
	}

	public void setIncome(float income) {
		this.income = income;
	}
}


Action部分代码 
package com.musicbox.chart;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.codehaus.jackson.map.ObjectMapper;

import com.opensymphony.xwork2.ActionSupport;
import com.yotc.opviewweb.entity.chart.Data;
import com.yotc.opviewweb.util.web.Struts2FlexUtils;

public class AmchartAction extends ActionSupport {

	public String chartdata() throws Exception {
		try {
			List<Data> datas = new ArrayList<Data>();
			Data d1 = new Data();
			d1.setIncome(10f);
			d1.setYear("2001年");
			datas.add(d1);
			Data d2 = new Data();
			d2.setIncome(20f);
			d2.setYear("2002");
			datas.add(d2);
			Data d3 = new Data();
			d3.setIncome(30f);
			d3.setYear("2003");
			datas.add(d3);
			Data d4 = new Data();
			d4.setIncome(40f);
			d4.setYear("2004");
			datas.add(d4);
			ObjectMapper mapper = new ObjectMapper();
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setContentType("application/json;charset=UTF-8");
			mapper.writeValue(response.getWriter(), datas);
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		return null;
	}
}
分享到：
| spring security 3.0 5分钟教程
评论
3 楼 631134230 2014-05-12  
怎么设置饼图  不要爆炸式进场动画效果
2 楼 musicbox95351 2014-01-07  
可以自己用ajax请求数据后，在回调方法里面去执行AmAngularGauge的初始化呀。这种方法是绝对可行的。
1 楼 pandatyut 2013-12-30  
大神，请问amchart的仪表盘AmAngularGauge能不能Ajax请求json数据啊
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics