问答首页 → Web前端技术
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结合实现类似我们电脑任务管理器的性能界面功能的实时曲线展示功能？

JavaScriptjQueryamcharts实时动态曲线 
2012年7月24日 14:09

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

0 0

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

2017年1月18日 10:43
0 0

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

2012年9月20日 09:38
0 0

换成:categoryAxis.minPeriod = "yyyy";

2012年8月02日 00:53
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

相关推荐

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics