`
musicbox95351
  • 浏览: 229193 次
  • 性别: 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数据啊
发表评论

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

相关推荐

    js统计相关 柱状图，饼图，波浪图

    "js统计相关 柱状图，饼图，波浪图"这一主题涵盖了JavaScript在创建动态、交互式统计图表时的一些核心概念和技术。下面将详细介绍这些知识点。 柱状图是数据可视化的常见类型，它通过垂直或水平的条形长度来表示...

    amcharts js实现折线柱状扇形图统计

    总结来说，"amcharts js实现折线柱状扇形图统计"是一个涵盖数据可视化的主题，涉及AmCharts库在创建折线图、柱状图和扇形图上的应用。通过学习和实践，开发者可以利用这个强大的工具创建出美观且互动性强的统计图表...

    amcharts 柱状图

    AmCharts 是一款强大的JavaScript图表库，它提供了一系列丰富的交互式图表类型，包括柱状图、线图、饼图等。在本篇中，我们将深入探讨如何使用AmCharts来创建一个柱状图，并通过实际的代码示例——"amlinetest"来...

    amcharts图表插件统计图形走势图代码

    **amCharts图表插件**是一种强大的JavaScript库，用于创建交互式、动态的统计图形和走势图。这个插件广泛应用于数据可视化领域，可以帮助开发者快速构建出专业级别的图表，如柱状图、饼图、线图、热力图等多种类型。...

    js绘制统计图

    总的来说，JavaScript绘制统计图是一项技术性和艺术性并存的工作。通过学习和实践，你可以创建出既美观又实用的数据可视化作品，让复杂的数据变得生动易懂。在不断发展的前端技术中，掌握这一技能对于任何IT从业者来...

    Amcharts js版

    AmCharts支持多种类型的图表，如柱状图、折线图、饼图、散点图等，提供丰富的自定义选项，使开发者能够根据项目需求定制独特的视觉效果。 1. **动态画图**: AmCharts的突出特性之一就是其动态性。用户可以通过添加...

    HTML5图表amCharts教程下载

    amCharts 提供了多种类型的图表，包括条形图、柱状图、曲线图、饼图、步线、平滑线、K 线图、OHLC 图、馅饼图、甜甜圈图、雷达图、XY 图、分散图、气泡图等。 amCharts 的图表具有无与伦比的功能和性能，在一个高级...

    amcharts数据库实例

    amcharts是一款强大的JavaScript图表库，可以生成交互式的2D和3D图表，如柱状图、饼图、线图等。在这个实例中，SpringMVC被用作后端控制层，负责处理请求、与数据库交互并生成响应。SpringMVC是一个基于Spring框架的...

    amCharts开发实例

    amCharts由一系列可自定义的图表类型组成，包括折线图、柱状图、饼图、地图等。它支持多种数据源，如JSON、XML或CSV格式，使得数据绑定和更新变得更加便捷。amCharts的核心特性包括响应式设计、动画效果、多系列数据...

    好用的图形统计工具amCharts

    amCharts是一款功能强大的JavaScript图表库，它为开发者提供了一种简单而有效的方式来创建各种互动式图表，包括柱状图、饼图和折线图等多种数据可视化形式。这个库以其易于使用、灵活性高以及丰富的定制选项而受到...

    amcharts图表工具

    这个工具的最大特点是它基于JavaScript（JS）编程，能够轻松地在网页上动态绘制各种统计数据图表，包括折线图、柱状图、饼图等，为数据可视化提供了一个强大的解决方案。 **一、AmCharts的特点** 1. **纯JS实现**...

    绝对经典 js 图形制作案例及工具

    随着互联网技术的发展，JavaScript库和工具为开发者提供了丰富的选项来创建各种类型的图表，如饼图、折线图、柱状图和K线图等。这些图表在数据分析、商业智能以及网页交互设计中广泛应用。本资源集合正是针对这些...

    amcharts for javascript

    AmCharts支持多种图表类型，包括柱状图、线图、饼图、地图等，适用于数据分析、可视化报告以及商业智能等多种场景。这个库通常通过引入JavaScript文件到HTML页面中来使用，允许开发者用JSON格式的数据创建动态、响应...

    amcharts统计图表破解版

    amcharts统计图表破解版、包括所有形式的（饼图、柱状、线形。。。）

    amcharts-php-master

    AmCharts 是一个强大的 JavaScript 图表库，提供丰富的图表类型，如折线图、柱状图、饼图、地图等。它支持动画效果、数据序列化、自定义交互和响应式设计，使得在 Web 上展示数据变得直观且吸引人。 2. **PHP 集成...

    amCharts示例

    amCharts是一款强大的JavaScript图表库，它提供了丰富的图表类型，如柱状图、线图、饼图、地图等，适用于创建交互式的、数据可视化的效果。这个示例集合是基于AMCHARTS的FLASH版本，展示了如何在项目中有效利用其...

    JS图形报表

    在本话题中，我们将探讨如何利用JS实现各种类型的图形报表，如柱状图、折线图、圆形立体柱状图、雷达图以及非立体饼图，这些都是用于统计数据可视化的常见图形工具。 1. **柱状图**：柱状图是一种直观的数据表示...

    amcharts_flex_components_1.8.3.3

    amCharts_flex_components_1.8.3.3版本包含了多种图表类型，如折线图、柱状图、饼图、散点图、热力图等，满足了各种数据分析和展示的需求。这些图表组件的特点在于它们的高度可定制性，开发者可以通过调整颜色、样式...

    JQuery统计图表插件

    jQuery统计图表插件正是为了解决这一问题而诞生的工具，它允许开发者轻松地在网页上创建各种类型的图表，如柱状图、折线图、饼图、散点图等，极大地提升了用户体验。 ### jQuery框架基础 jQuery是一个快速、简洁的...

    jquery 生成图表 ,8款实用

    8. **Morris.js**：Morris.js是一个简单的图表库，适合快速创建基本的线图、柱状图和饼图。它的设计风格与Raphaël库相融合，提供美观的视觉效果。 在实际应用中，选择合适的图表插件主要考虑以下因素： - **数据...

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