本文主要是介绍java实现FusionCharts实时图工具，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
FusionCharts强大无比，使用版本是FusionCharts3.2 (后面提供下载)破解版。web程序中无须jar包，
先看FusionChart如何获取数据：最常用的是setDataXML 和 setDataURL
setDataXML 是接收xml字符串，根据字符串生成图表信息，大多的图表是需要后台动态的获取数据的，适合于实时图表。
setDataURL 是接收xml路径的字符串，如果后台会生成xml文件，也是可以的，不适合实时图表。如果是固定的图表信息这个最适合。
所以setDataXML 比较实用，setDataJSON也一样。
下面的工具类的目的是给Action提供使用，提供最基本的，最常规的属性。如果是自定义很强，需要自己生成相应的xmldata,工具类通用了二十多种效果(可能还有，破解版的swf 不多)。
代码还不完善，基本功能够用了,单列和多列都可以使用，只需要改改相应的swf即可。
JSP中有一个自定义的图表，xmldata直接写在JSP里面了。
自定义的图表实现了很多非常规功能，如导出JPEG/JPG/PDF 导出进度条中文提示，导出按钮中文。断点的，数字和文字格式等，chart显示的效果等，详细用法在JSP中有注释。
由于结构的属性太多了，要查看里面的属性可以去FusionCharts_Evaluation\Code\ChartXSD\xxx.xsd等里面查看有哪些标签，哪些属性，以及属性类型等。
直接上代码
chart:<category label='Jun' /> <vLine color='FF5904' thickness='2'/>
chart:<trendlines><line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/> </trendlines>
import java.util.Random;
/** 图表数据集合* 功能：组合数据,可自定义颜色，没有自定义颜色前12个为randomColor的顺序，* 超过部分随意选择randomColor的一种颜色* 对于下面自定义很强的 需要自己生成xmldata* set alpha = '50' 透明度为50% * set dashed='1' 虚线状态显示* set 对于Line anchorSides='7' 显示的点为几边形 anchorRadius = '4' 形状大小 * set anchorBorderColor='A186BE' 点 的边框颜色 anchorBgColor='8BBA00' 点的背景色* set 中如果没有value属性 还是留有空间 只是没显示 空元素 */
public class DataSet {private String[] randomColor = new String[] { "AFD8F8", "F6BD0F", "8BBA00","FF8E46","008E8E","D64646","8E468E", "588526", "B3AA00","008ED6", "9D080D", "A186BE" };private String seriesName; // 标示private String[] setNames; // 名称private String[] setValues;// 值private String[] setColors;// 颜色private String[] setTooltexts;// 提示信息tooltext='信息：{br}xxx...'public String[] getSetNames() {return setNames;}public void setSetNames(String[] setNames) {this.setNames = setNames;}public String[] getSetColors() {return setColors;}public void setSetColors(String[] setColors) {this.setColors = setColors;}public String getSeriesName() {return seriesName;}public void setSeriesName(String seriesName) {this.seriesName = seriesName;}public String[] getSetValues() {return setValues;}public void setSetValues(String[] setValues) {this.setValues = setValues;}/** 多列数据组合*/public String createDataSet() {String dataSet = "<dataset seriesName='" + seriesName + "'>";dataSet+=createSets(dataSet,false);dataSet += "</dataset>";return dataSet;}/** 公用到普通的Column2D Column3D Line2D Line3D 等*/public String createSets(String dataSet,boolean boo) {String newDataSet = "";for (int i = 0; i < setValues.length; i++) {if (setColors != null) {if (setNames != null) {newDataSet += "<set name = '" + setNames[i] + "' value='" + setValues[i] + "' color = '" + setColors[i]+ "'/>";} else{if(boo){if(i>randomColor.length){int ai = new Random().nextInt(12);newDataSet += "<set value='" + setValues[i] + "' color = '" + randomColor[ai] + "'/>";}else{newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";}}else{newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";}}} else {newDataSet += "<set value='" + setValues[i] + "'/>";}}return newDataSet;}
}
---------------------------------------------------------------------------------------------------
/** 图表工具* 功能：支持MS多列系列图表，和单例系列图标* 对于下面自定义很强的 需要自己生成xmldata* chart x轴下标题文字 labelDisplay='Rotate' 垂直显示 slantLabels='1' 45 度倾斜* chart x轴下标题文字 labelDisplay = "Stagger" staggerLines='n' 显示的行数 如果文字过长 就各行对应显示* chart x轴下标题文字 labelStep='n' 文字每隔几个一显示 * chart x轴 上的柱顶部固定的文字值 rotateValues='1' 垂直显示* chart connectNullData='1' 对于Line,跳过空元素直接与下一个节点连接 // lineDashGap='6' 虚线显示空元素的连接 需要程序处理上一个节点为dashed='1'* chart lineDashGap = '5' 虚线的点的间隔* chart decimals='2' 小数点后2位数 其他类似 对于数据差距比较很小(最大值最小值最少相差在1之内) 适用// 如果想让柱状的值显示小数点后一位 forceDecimals='1' (Y轴显示还是2位或者更多)* chart formatNumberScale='0' 显示格式为 234,344,679* chart formatNumberScale='0' formatNumber='0' 显示格式为原始格式*/
public class Chart {private String caption;// 标题private String xAxisName;private String yAxisName;private String showValues;private String numberPrefix;private String[] categories;private DataSet[] dataset;private String lineStartValue;private String lineColor;private String lineDisplayValue;private String yAxisMinValue;private String yAxisMaxValue;public String getyAxisMinValue() {return yAxisMinValue;}public void setyAxisMinValue(String yAxisMinValue) {this.yAxisMinValue = yAxisMinValue;}public String getyAxisMaxValue() {return yAxisMaxValue;}public void setyAxisMaxValue(String yAxisMaxValue) {this.yAxisMaxValue = yAxisMaxValue;}public String getCaption() {return caption;}public void setCaption(String caption) {this.caption = caption;}public String getxAxisName() {return xAxisName;}public void setxAxisName(String xAxisName) {this.xAxisName = xAxisName;}public String getyAxisName() {return yAxisName;}public void setyAxisName(String yAxisName) {this.yAxisName = yAxisName;}public String getShowValues() {return showValues;}public void setShowValues(String showValues) {this.showValues = showValues;}public String getNumberPrefix() {return numberPrefix;}public void setNumberPrefix(String numberPrefix) {this.numberPrefix = numberPrefix;}public String[] getCategories() {return categories;}public void setCategories(String[] categories) {this.categories = categories;}public DataSet[] getDataset() {return dataset;}public void setDataset(DataSet[] dataset) {this.dataset = dataset;}public String getLineStartValue() {return lineStartValue;}public void setLineStartValue(String lineStartValue) {this.lineStartValue = lineStartValue;}public String getLineColor() {return lineColor;}public void setLineColor(String lineColor) {this.lineColor = lineColor;}public String getLineDisplayValue() {return lineDisplayValue;}public void setLineDisplayValue(String lineDisplayValue) {this.lineDisplayValue = lineDisplayValue;}/** MS 多列系列*/public String createChartXmlData() {String chartXmlData = "<chart useRoundEdges='1' caption='" + caption + "' xAxisName='"+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"+ showValues + "' numberPrefix='" + numberPrefix + "' "+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"+ yAxisMaxValue + "'>";;chartXmlData += "<categories>";for (int i = 0; i < categories.length; i++) {chartXmlData += "<category label='" + categories[i] + "' />";}chartXmlData += "</categories>";for (int i = 0; i < dataset.length; i++) {chartXmlData += dataset[i].createDataSet();}chartXmlData += " <trendlines><line startValue='" + lineStartValue+ "' color='" + lineColor + "' displayValue='"+ lineDisplayValue + "'/></trendlines>";chartXmlData += "</chart>";return chartXmlData;}/** 单个图标系列*/public String createRoutineChartXmlData() {String chartXmlData = "<graph useRoundEdges='1' caption='" + caption + "' xAxisName='"+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"+ showValues + "' numberPrefix='" + numberPrefix + "' "+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"+ yAxisMaxValue + "'>";chartXmlData += dataset[0].createSets("",true);chartXmlData += "</graph>";return chartXmlData;}
}
Action代码：
public void test() {// 随时测试response.setCharacterEncoding("UTF-8");Chart chart = new Chart();chart.setCaption("图表信息");chart.setxAxisName("月份");chart.setyAxisName("交易额");chart.setShowValues("0");chart.setNumberPrefix("$");String[] cs = { "1月", "2月", "3月", "4月", "5月" };chart.setCategories(cs);DataSet[] ds = new DataSet[3];// 三个进行对比for (int i = 0; i < ds.length; i++) {ds[i] = new DataSet(); // 对比五个月的数据ds[i].setSeriesName("200" + i + "年");int a1 = new Random().nextInt(1000);if (a1 <= 0) {a1 = 100;}int a2 = new Random().nextInt(1000);if (a2 <= 0) {a2 = 100;}int a3 = new Random().nextInt(1000);if (a3 <= 0) {a3 = 100;}int a4 = new Random().nextInt(1000);if (a4 <= 0) {a4 = 100;}int a5 = new Random().nextInt(1000);if (a5 <= 0) {a5 = 100;}String[] sv = { "" + a1, "" + a2, "" + a3, "" + a4, "" + a5 };ds[i].setSetValues(sv);}chart.setDataset(ds);chart.setLineStartValue("26000");chart.setLineColor("91C728");chart.setLineDisplayValue("Target");chart.setyAxisMinValue("0"); // 最小值chart.setyAxisMaxValue("1200");// 最大值String xmlDate = chart.createChartXmlData();PrintWriter pw;try {pw = response.getWriter();pw.print(xmlDate);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}public void test1() {response.setCharacterEncoding("UTF-8");Chart chart = new Chart();chart.setCaption("图表信息");chart.setxAxisName("月份");chart.setyAxisName("交易额");chart.setShowValues("0");chart.setNumberPrefix("$");String[] cs = { "1月", "2月", "3月", "4月", "5月" };DataSet[] ds = new DataSet[1];// 三个进行对比ds[0] = new DataSet(); // 对比五个月的数据ds[0].setSeriesName("2000年");ds[0].setSetNames(cs);String[] sv = { "" + 190, "" + 334, "" + 799, "" + 888, "" + 900 };String[] sc = { "F6BD0F", "AFD8F8", "FF8E46", "008ED6", "A186BE" };ds[0].setSetColors(sc);ds[0].setSetValues(sv);chart.setDataset(ds);chart.setyAxisMinValue("0"); // 最小值chart.setyAxisMaxValue("1200");// 最大值String xmlDate = chart.createRoutineChartXmlData();PrintWriter pw;try {pw = response.getWriter();pw.print(xmlDate);} catch (IOException e) {e.printStackTrace();}}JSP如下
<%@ 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><title>图表Fusioncharts测试</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="chart/script/FusionCharts.js"></script><script type="text/javascript" src="chart/script/FusionChartsExportComponent.js"></script><script type="text/javascript">window.onload = function(){//chart x轴下标题文字 labelDisplay='Rotate' 垂直显示 slantLabels='1' 45 度倾斜//chart x轴下标题文字 labelDisplay = "Stagger" staggerLines='n' 显示的行数 如果文字过长 就各行对应显示//chart x轴下标题文字 labelStep='n' 文字每隔几个一显示 // chart x轴 上的柱顶部固定的文字值 rotateValues='1' 垂直显示// set alpha = '50' 透明度为50% // set dashed='1' 虚线状态显示// set 对于Line anchorSides='7' 显示的点为几边形 anchorRadius = '4' 形状大小 // set anchorBorderColor='A186BE' 点 的边框颜色 anchorBgColor='8BBA00' 点的背景色// set 中如果没有value属性 还是留有空间 只是没显示 空元素 // chart connectNullData='1' 对于Line,跳过空元素直接与下一个节点连接 // lineDashGap='6' 虚线显示空元素的连接 需要程序处理上一个节点为dashed='1'// chart lineDashGap = '5' 虚线的点的间隔// chart decimals='2' 小数点后2位数 其他类似 对于数据差距比较很小(最大值最小值最少相差在1之内) 适用// 如果想让柱状的值显示小数点后一位 forceDecimals='1' (Y轴显示还是2位或者更多)// chart formatNumberScale='0' 显示格式为 234,344,679// chart formatNumberScale='0' formatNumber='0' 显示格式为原始格式// chart clickURL='n-http://www.baidu.com' chart点击打开百度 // chart toolTipBorderColor 提示的边框颜色 toolTipBgColor 提示的背景色 // chart useRoundEdges = '1' chart展示圆柱状图表 // chart exportHandler='fcExporter1' chart指定client-side导出组件// 导出功能所需要的三件事情： 1 引入FusionChartsExportComponent.js 2 html中添加导出按钮的div(id = 'xy') 3 并设置相应的属性 exportAtClient = '1'支持客户端导出 exportEnabled = '1' 可导出 4 chart指定exportHandler// chart exportDialogMessage='已导出 ' 设置导出文件的时候百分比进度前的文字var xx = "<chart caption = '自定义图表(点击倒数第二个&右键导出)' bgColor='FF5904,FFFFFF' bgAlpha='100,100' bgRatio='0,100' bgAngle='0'"+" staggerLines='3' labelDisplay='Stagger' labelStep='1' "+" rotateValues='1' canvasPadding='0' connectNullData='1' lineDashGap='5'"+" decimals='2' formatNumberScale='0' formatNumber='0' exportEnabled='1'"+" toolTipBorderColor='D9E5F1' toolTipBgColor='D9E5F1' showToolTip='1' useRoundEdges='1'"+" exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' exportDialogMessage='已导出 '>" +"<set label='John' value='42900' tooltext = '第1个值为{br}：420'/>"+"<set label='Const' value='12345' tooltext = '第2一个值为：295'/>"+"<set label='Ivy' value='52233' tooltext = '第3个值为：523' dashed='1'/>" +"<set label='Pery' />"+"<set label='Erlang' />"+"<set label='Chuank' />"+"<set label='Sprone' value='42000' alpha='50' dashed='1' tooltext = '第1个值为{br}：420'/>"+"<set label='July' value='2295' tooltext = '第2一个值为：295'/>"+"<set label='Lim' value='52243' tooltext = '第3个值为：523'/>"+"<set label='Joli' value='35679' tooltext = '第1个值为{br}：420'/>"+"<set label='Boyka' link='JavaScript:myJS(\"Boyka\");' value='68420' tooltext = '第2一个值为：295'/>"+"<set label='Abma' link='JavaScript:myJS(\"Abma\");' value='52463' tooltext = '第3个值为：523'/>"+"<set label='Lanbo' link='JavaScript:myJS(\"Lanbo\");' value='49990' tooltext = '第1个值为{br}：420'/>"+"<set label='Jim' link='newchart-xml-jim-quarterly' value='46999' tooltext = '第2一个值为：295' color='FF5906' />"+"<set label='Chelios' value='49900' tooltext = '"+"杰森·斯坦森 主要作品{br}"+"▪ 巴西任务 ( 2013) ▪ 帕克 ( 2013){br}"+"▪ 暂告安全 ( 2012) ▪ 玩命追踪 ( 2012){br}"+"▪ 波茨坦广场 ( 2012)▪ 敢死队2 ( 2012){br}"+"▪ 铁血精英 ( 2011) ▪ 机械师 ( 2010){br}"+"▪ 死亡飞车2 ( 2010)▪ 敢死队 ( 2010){br}▪ 怒火攻心2 高压电"+"' color='FF5904' "+" link='JavaScript:myJS(\"49900\");' anchorRadius='5' anchorSides='6' anchorBorderColor='A186BE' anchorBgColor='8BBA00'/>"+" <linkeddata id='jim-quarterly'><chart caption='第一层转向(点击第二个进入)' subcaption='For the year 2004' xAxisName='中国' yAxisName='GDP'> <set label='Q1' value='11700'/> <set label='Q2' link='newchart-xml-a-quarterly' value='8600'/> <set label='Q3' value='6900' /> <set label='Q4' value='10600' />"+"<linkeddata id='a-quarterly'><chart caption='第二层转向' subcaption='浙江年度xx' xAxisName='浙江' yAxisName='GPP'> <set label='Q1' value='80'/> <set label='Q2' value='50'/> <set label='Q3' value='99' /> <set label='Q4' value='90' /> </chart> </linkeddata></chart> </linkeddata>"+" <styles><style name='MyFirstBlur' type='Blur' blurX='6' blurY='6' /></styles></chart>"; // exportAtClient exportEnabled='1' 加入fcexplorer.js FusionChartsExportComponent.js// FCExporter.swf 详细可见Client_side explorting-simple example // linkeddata 要转向的图的数据来源var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId234", "300", "300");myChart.setDataXML(xx); myChart.render("test");var myExportComponent = new FusionChartsExportObject("fcExporter1", "chart/swf/FCExporter.swf");myExportComponent.componentAttributes.width = '400';myExportComponent.componentAttributes.height = '60';//Background colormyExportComponent.componentAttributes.bgColor = 'ffffdd';//Border propertiesmyExportComponent.componentAttributes.borderThickness = '2';myExportComponent.componentAttributes.borderColor = '0372AB';//Font propertiesmyExportComponent.componentAttributes.fontFace = 'Arial';myExportComponent.componentAttributes.fontColor = '0372AB';myExportComponent.componentAttributes.fontSize = '9';myExportComponent.componentAttributes.btnWidth = '30';myExportComponent.componentAttributes.btnHeight= '20';myExportComponent.componentAttributes.btnColor = 'E1f5ff';myExportComponent.componentAttributes.btnBorderColor = '0372AB';//Button font propertiesmyExportComponent.componentAttributes.btnFontFace = 'Verdana';myExportComponent.componentAttributes.btnFontColor = '0372AB';myExportComponent.componentAttributes.btnFontSize = '15';myExportComponent.componentAttributes.btnsavetitle = '保存'myExportComponent.componentAttributes.btndisabledtitle = '导出请点击右键...'; myExportComponent.Render("fce");////用configureLink可以指定不行形态的图表展现, 会替代掉原有的linkeddata // 如果只有一个的话，可用下面，如果不是一种的话，下面代码不写。/*FusionCharts("myChartId234").configureLink ( { swfUrl : "chart/swf/Pie3D.swf",overlayButton:{message: '返回',fontColor : '880000',bgColor:'FFEEEE',borderColor: '660000'}}, 0);*/}// 激发事件function myJS(myVar){window.alert(myVar);}$.ajax({type: "POST", url: "stat!test.action", //请求的actionsuccess: function(data){ //结果 MSColumn2D MSColumn3D MSLinevar myChart = new FusionCharts("chart/swf/MSColumn2D.swf", "myChartId1", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv1");myChart = new FusionCharts("chart/swf/MSColumn3D.swf", "myChartId2", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv2");myChart = new FusionCharts("chart/swf/MSLine.swf", "myChartId3", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv3");myChart = new FusionCharts("chart/swf/MSArea.swf", "myChartId3_1", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv3_1");myChart = new FusionCharts("chart/swf/MSCombi2D.swf", "myChartId3_2", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv3_2");// 纯3D 效果 可转动myChart = new FusionCharts("chart/swf/MSColumnLine3D.swf", "myChartId3_3", "350", "350");myChart.setDataXML(data); myChart.render("chartDiv3_3");myChart = new FusionCharts("chart/swf/Marimekko.swf", "myChartId3_4", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv3_4");myChart = new FusionCharts("chart/swf/MSCombi3D.swf", "myChartId3_5", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv3_5"); }}); $.ajax({type: "POST", url: "stat!test1.action", //请求的actionsuccess: function(data){ //结果 Column2D Column3D Line Pie3Dvar myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId4", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv4");myChart = new FusionCharts("chart/swf/Column3D.swf", "myChartId4", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv5");myChart = new FusionCharts("chart/swf/Line.swf", "myChartId6", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv6");myChart = new FusionCharts("chart/swf/Pie2D.swf", "myChartId7", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv7");myChart = new FusionCharts("chart/swf/Pie3D.swf", "myChartId8", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv8");其他效果myChart = new FusionCharts("chart/swf/SSGrid.swf", "myChartId9", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv9");// 概率图2DmyChart = new FusionCharts("chart/swf/Pareto2D.swf", "myChartId10", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv10");// 概率图3DmyChart = new FusionCharts("chart/swf/Pareto3D.swf", "myChartId11", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv11");myChart = new FusionCharts("chart/swf/Doughnut2D.swf", "myChartId12", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv12");myChart = new FusionCharts("chart/swf/Doughnut3D.swf", "myChartId13", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv13");myChart = new FusionCharts("chart/swf/Area2D.swf", "myChartId14", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv14");myChart = new FusionCharts("chart/swf/Bar2D.swf", "myChartId15", "300", "300");myChart.setDataXML(data); myChart.render("chartDiv15");}});</script>
</head>
<body><table><tr><td><div id = "chartDiv1"></div></td><td><div id = "chartDiv2"></div></td><td><div id = "chartDiv3"></div></td></tr><tr><td><div id = "chartDiv3_1"></div></td><td><div id = "chartDiv3_2"></div></td><td><div id = "chartDiv3_3"></div></td></tr><tr><td><div id = "chartDiv3_4"></div></td><td><div id = "chartDiv3_5"></div></td><td><div id = "test"></div><div id = "fce"></div></td></tr><!-- 下面是单列的图表 --><tr><td><div id = "chartDiv4"></div></td><td><div id = "chartDiv5"></div></td><td><div id = "chartDiv6"></div></td></tr><tr><td><div id = "chartDiv7"></div></td><td><div id = "chartDiv8"></div></td><td><div id = "chartDiv9"></div></td></tr><tr><td><div id = "chartDiv10"></div></td><td><div id = "chartDiv11"></div></td><td><div id = "chartDiv12"></div></td></tr><tr><td><div id = "chartDiv13"></div></td><td><div id = "chartDiv14"></div></td><td><div id = "chartDiv15"></div></td></tr></table>
</body>
</html>
这篇关于java实现FusionCharts实时图工具的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
