急---当前要用amCharts做数据图形展示，实现实时动态展示功能（JavaScript版本）

0 0

急---当前要用amCharts做数据图形展示，实现实时动态展示功能（JavaScript版本）20

想请问各位大侠两个问题

1、使用jquery 的ajax功能调用得到返回数据，给amCharts给chart.dataProvider赋值，但是赋值之后图形不展示。

<script type="text/javascript">
	$(function() {
		var chart;
		var chartData=new Array;
		loadData();
		createImg();
	});
	function loadData() {
		$.ajax({
			type : "POST",
			url : root + "/alarm/getChartsJson.do",
			async : false,
			success : function(data) {
								                                 chartData=data;
				createImg(charData);
			}
		});
	}
	function createImg(charData) {
		AmCharts.ready(function() {
			// SERIAL CHART
			chart = new AmCharts.AmSerialChart();
			chart.pathToImages = root
					+ "/Web/common/js/amcharts/amcharts/images/";
			chart.zoomOutButton = {
				backgroundColor : "#000000",
				backgroundAlpha : 0.15
			};
			chart.dataProvider = chartData;
			chart.categoryField = "year";

			chart.addTitle("Traffic incidents per year", 15);

			// AXES
			// Category
			var categoryAxis = chart.categoryAxis;
			categoryAxis.gridAlpha = 0.07;
			categoryAxis.axisColor = "#DADADA";
			categoryAxis.startOnAxis = true;

			// Value
			var valueAxis = new AmCharts.ValueAxis();
			valueAxis.title = "percent"; // this line makes the chart "stacked"
			valueAxis.stackType = "100%";
			valueAxis.gridAlpha = 0.07;
			chart.addValueAxis(valueAxis);

			// GRAPHS
			// first graph
			var graph = new AmCharts.AmGraph();
			graph.type = "line"; // it's simple line graph
			graph.title = "Cars";
			graph.valueField = "cars";
			graph.balloonText = "[[value]] ([[percents]]%)";
			graph.lineAlpha = 0;
			graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph 
			chart.addGraph(graph);
			
			// second graph
			var graph = new AmCharts.AmGraph();
			graph.type = "line";
			graph.title = "Motorcycles";
			graph.valueField = "motorcycles";
			graph.balloonText = "[[value]] ([[percents]]%)";
			graph.lineAlpha = 0;
			graph.fillAlphas = 0.6;
			chart.addGraph(graph);

			// third graph
			var graph = new AmCharts.AmGraph();
			graph.type = "line";
			graph.title = "Bicycles";
			graph.valueField = "bicycles";
			graph.balloonText = "[[value]] ([[percents]]%)";
			graph.lineAlpha = 0;
			graph.fillAlphas = 0.6;
			chart.addGraph(graph);

			// LEGEND
			var legend = new AmCharts.AmLegend();
			legend.align = "center";
			chart.addLegend(legend);

			// CURSOR
			var chartCursor = new AmCharts.ChartCursor();
			chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
			chartCursor.cursorAlpha = 0;
			chart.addChartCursor(chartCursor);

			// WRITE
			chart.write("chartdiv");
		});
	}
</script>

action代码段

public String getChartsJson() {
		String data = "[{year:2000,cars:1587,motorcycles:650,bicycles:121}," +
				"{year:1995,cars:1567,motorcycles:683,bicycles:146}," +
				"{year:1996,cars:1617,motorcycles:691,bicycles:138}," +
				"{year:1997,cars:1630,motorcycles:642,bicycles:127}," +
				"{year:1998,cars:1660,motorcycles:699,bicycles:105}," +
				"{year:1999,cars:1683,motorcycles:721,bicycles:109}," +
				"{year:2000,cars:1691,motorcycles:737,bicycles:112}," +
				"{year:2001,cars:1298,motorcycles:680,bicycles:101}," +
				"{year:2002,cars:1275,motorcycles:664,bicycles:97}," +
				"{year:2003,cars:1246,motorcycles:648,bicycles:93}," +
				"{year:2004,cars:1218,motorcycles:637,bicycles:101}," +
				"{year:2005,cars:1213,motorcycles:633,bicycles:87}," +
				"{year:2006,cars:1199,motorcycles:621,bicycles:79}," +
				"{year:2007,cars:1110,motorcycles:210,bicycles:81}," +
				"{year:2008,cars:1165,motorcycles:232,bicycles:75}," +
				"{year:2009,cars:1145,motorcycles:219,bicycles:88}," +
				"{year:2010,cars:1163,motorcycles:201,bicycles:82}," +
				"{year:2011,cars:1180,motorcycles:285,bicycles:87}," +
				"{year:2012,cars:1159,motorcycles:277,bicycles:71}]";
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		out.write(data);
		out.close();
		return null;
	}

2、如何使用struts2和javascript版本的AmCharts结合实现类似我们电脑任务管理器的性能界面功能的实时曲线展示功能？

2012年7月24日 14:09

wei_jiyong
10
0 0 1

4个答案按时间排序按投票排序

0 0

第15行,19行,charData应该改成chartData,少了一个t.

2017年1月18日 10:43

hsq5
15
0 0 0

添加评论

0 0

我也遇到相同问题，求帮忙指导

2012年9月20日 09:38

wangnaian
2
0 0 8

添加评论

0 0

换成:categoryAxis.minPeriod = "yyyy";

2012年8月02日 00:53

lingze666
30
0 0 0

添加评论

0 0

// Category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridAlpha = 0.07;
            categoryAxis.axisColor = "#DADADA";
            categoryAxis.startOnAxis = true;

//差一个他.
categoryAxis.minPeriod = "mm";
//是以年为单位进行横向排列显示出来
// as we have data with minute interval, we have to set "mm" here.

2012年8月02日 00:53

lingze666
30
0 0 0

添加评论

已解决问题

未解决问题

排行榜

查看全部排名>>