web报表functionChart教程

最新推荐文章于 2017-06-19 11:45:00 发布

转载最新推荐文章于 2017-06-19 11:45:00 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kelvinline/blog/337015

文章标签：

#javascript #python #java #ViewUI

本文分享了一个使用Java实现的FusionCharts图表展示示例，通过具体代码演示了如何将数据转化为图表，并介绍了如何设置图表样式及数据标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

参考： http://cmsblogs.com/?p=843#comments

很不错的教程

附上自己写的一个小demo

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
		
         <div id="chartContainer">FusionCharts XT will load here!</div>   
         
<title>Insert title here</title>
    
    </head>
    <body>
    <script type="text/javascript">

	   
	
		function createColumnCharte(data, imgContentId) {
			
			var d = constructChrat(data);
			console.info(d);
			var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
					"img", "850", "600", "0", "1" );
		     myChart.setJSONData(d);
		     myChart.render(imgContentId);
		}
		
		function constructChrat(data) {
			var charte = {"caption":"图表", "xAxisName" :"选项", 
					"yAxisName":"数量", "numberPrefix":"",
					"formatNumberScale":"0", 
		      		"decimalPrecision":"0"
					};
			
			//修改label字体
			var styles = { "definition": [
			                              {
			                                  "name": "myLabelsFont",
			                                  "type": "font",
			                                  "font": "微软雅黑",
			                                  "size": "14",
			                                  "color": "000000",
			                                  "bold": "1"
			                                }
			                              ],
			                              "application": [
			                                {
			                                  "toobject": "DataLabels",
			                                  "styles": "myLabelsFont"
			                                }
			                              ]
						};
					
			var dataList = constructChartDataList(data);
			var json = {"chart": charte, "data": dataList, "styles":styles};
			return json;
		}
		
		
		function constructChartDataList(data) {
			data = eval("(" + data +")");
			var listQueOption = data.listQueOption;
			var listValue = data.listValue;
			
			//展示选项数据
			var html = "";
			var optionText = "";
			var datalist = [];
			for(var temp in listQueOption) {
				var option = listQueOption[temp];
				var value = listValue[temp];
				var singData = new construSingleData(option, value);
				//var label = {"label":option+"", "value": value};
				datalist.push(singData);
			}
			return  datalist;
		}
		
		function construSingleData(option, value) {
			this.label = option;
			this.value = value;
		}
		
		 var data = "{\"amount\":8420,\"listValue\":[0,4995,2628,797,0],\"imgPath\":\"imgpath\",\"listQueOption\":[\"不到18岁\",\"18-34岁\",\"35-49岁\",\"50-64岁\",\"65岁及以上\"],\"listPercent\":[\"0.00%\",\"59.32%\",\"31.21%\",\"9.47%\",\"0.00%\"]}";
		 createColumnCharte(data, "chartContainer");
			
				</script>      
     
      </body>
</html>

转载于:https://my.oschina.net/kelvinline/blog/337015