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

最新推荐文章于 2021-06-15 22:29:01 发布

iteye_4512

最新推荐文章于 2021-06-15 22:29:01 发布

阅读量340

点赞数

分类专栏： jquery js 文章标签： xhtml json javascript ViewUI

本文链接：https://blog.csdn.net/iteye_4512/article/details/82398375

版权

jquery js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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;
	}
}