functioncharts学习（二）MSLine线性图
?
实现需要先下载FusionCharts支持文件，最好使用一个破解版，可以去掉官网打出的一些广告效果；
?
XML数据格式：
?
<?xml version="1.0" encoding="UTF-8"?><chart caption="室内外温度监控线性图" yAxisName="温度值" xAxisName="周期"bgColor="FF5904,FFFDDD,FFFFFF" bgAlpha="50" bgRatio="40,60,30" bgAngle="180"showBorder="1" borderColor="1D8BD1" borderThickness="3" borderAlpha="30"numberSuffix="℃"><categories><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /><category label="11月份" /></categories><dataset seriesName="室内温度" color="1D8BD1" anchorBorderColor="1D8BD1"anchorBgColor="F1683C"><set value="24" /><set value="17" /><set value="19" /><set value="20" /><set value="23" /><set value="20" /><set value="17" /><set value="17" /><set value="24" /><set value="23" /></dataset><dataset seriesName="室外温度" color="F1683C" anchorBorderColor="1D8BD1"><set value="15" /><set value="7" /><set value="12" /><set value="5" /><set value="15" /><set value="5" /><set value="5" /><set value="15" /><set value="9" /><set value="11" /></dataset></chart>
?
?
?
// 创建FunctionCharts MSLine线性图xml模板数据数据XmlUtils.buildFunctionChartsMSLineXMLTemplatesData(temperMonitors);
?
?
package cn.sup.cd.common.util;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.util.List;import org.apache.struts2.ServletActionContext;import org.jdom.Document;import org.jdom.Element;import org.jdom.output.XMLOutputter;import cn.sup.cd.domain.TemperMonitor;public class XmlUtils {/** * 构建FunctionCharts MSLine线性图 XML格式的模板数据 * @param list 查询的list数据集合 */public static void buildFunctionChartsMSLineXMLTemplatesData(List<TemperMonitor> list){//创建根节点Element chart = new Element("chart");//为根节点设置属性chart.setAttribute("caption","室内外温度监控线性图");//X轴名称chart.setAttribute("yAxisName", "温度值");//y轴名称chart.setAttribute("xAxisName", "周期");//背景颜色chart.setAttribute("bgColor", "FF5904,FFFDDD,FFFFFF");//透明度chart.setAttribute("bgAlpha", "50");//每种颜色渐变的百分比。总的百分比的和必须是100chart.setAttribute("bgRatio", "40,60,30");//渐变色的填充角度 (角度： 0-360).chart.setAttribute("bgAngle", "180");//是否显示边框。2D Chart默认为1，3D Chart默认为0.chart.setAttribute("showBorder", "1");//边框颜色chart.setAttribute("borderColor", "1D8BD1");//边框的宽度，以像素为单位chart.setAttribute("borderThickness", "3");//边框的透明度。chart.setAttribute("borderAlpha", "30");chart.setAttribute("numberSuffix", "℃");//将根节点插入到文档中Document doc = new Document(chart);//获取xml数据存放位置String outputPath = ServletActionContext.getServletContext().getRealPath("/");//Element categories = new Element("categories");//室内温度数据设置Element indoor_temper_dataset = new Element("dataset");indoor_temper_dataset.setAttribute("seriesName","室内温度");indoor_temper_dataset.setAttribute("color","1D8BD1");indoor_temper_dataset.setAttribute("anchorBorderColor","1D8BD1");indoor_temper_dataset.setAttribute("anchorBgColor","1D8BD1");//室外温度数据设置Element outdoor_temper_dataset = new Element("dataset");outdoor_temper_dataset.setAttribute("seriesName","室外温度");outdoor_temper_dataset.setAttribute("color","F1683C");outdoor_temper_dataset.setAttribute("anchorBorderColor","1D8BD1");indoor_temper_dataset.setAttribute("anchorBgColor","F1683C");//此处 for 循环可替换成 遍历 数据库表的结果集操作;try {if (null != list) {for (TemperMonitor temper : list) {Element category = new Element("category");Element indoor_temper_set = new Element("set");Element outdoor_temper_set = new Element("set");category.setAttribute("label",temper.getMonitor_cycle());//室内温度值设置indoor_temper_set.setAttribute("value",String.valueOf(temper.getIndoor_temperature()));//室外温度值设置outdoor_temper_set.setAttribute("value",String.valueOf(temper.getOutdoor_temperature()));//给父节点添加子节点;categories.addContent(category);indoor_temper_dataset.addContent(indoor_temper_set);outdoor_temper_dataset.addContent(outdoor_temper_set);}}} catch (Exception e) {e.printStackTrace();}//将所有节点添加到 根节点chart.addContent(categories);chart.addContent(indoor_temper_dataset);chart.addContent(outdoor_temper_dataset);XMLOutputter XMLOut = new XMLOutputter();try {XMLOut.output(doc, new FileOutputStream(outputPath+"/xmlData/"+"emperMonitorMSLine.xml"));} catch (FileNotFoundException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}}}?
?
?
<tr> <td colspan="5"><div id="graphicsShowDataOne"></div></div> </td></tr>
?
?
$(document).ready(function() {$("#graphicsShowDataOne").insertFusionCharts( {swfUrl : "/js/FusionCharts/MSLine.swf",dataSource : "/xmlData/emperMonitorMSLine.xml",dataFormat : "xmlurl",width : "580",height : "400",id : "myChartId"});});?