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");
		//每种颜色渐变的百分比。总的百分比的和必须是100
		chart.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 class="graphicsMaxDiv">
			<div class="graphicsShow1" 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"
	});
});