EXT amcharts图表使用

amcharts 配置文件׃settings.xml + data.xml

settings.xml 主要配置图表的样式，如：图表样式、3D效果、背景、网格等等等等
data.xml xml格式的数据文件，通常由程序生成

1.amcharts相关文件下载 http://www.amcharts.com/download

2.将相关文件导入工程目录

3.准备settings.xml和data.xml
  可参照amcharts中的setting.xml设置我们的图表样式
  data.xml格式按照amcharts中给出的格式生成，这里我们可以使用dom4j来创建

 

data.xml

 

<?xml version="1.0" encoding="UTF-8"?> <chart> <series> </series> <graphs> <graph gid="1"> </graph> <graph gid="2"> <!-- <value xid="31" description="Opec 10% quota increase" bullet_color="#0000ff" bullet_size="12">49.63</value>--> </graph> </graphs> <guides> <guide> <start_value>140</start_value> <title>收缩压警戒值:180</title> <color>#FF0000</color> <inside>true</inside> </guide> <guide> <start_value>90</start_value> <title>舒张压警戒值:80</title> <color>#FF0000</color> <inside>true</inside> </guide> </guides> </chart>

 

4.准备xml输出文件xmlOut.jsp

 

 <%@ page language="java" pageEncoding="UTF-8"%> ${xmlStr}

 

5.准备xml输出文件xmlOut.jsp  格式用dom4j从data.xml获取

 

 Document document = XmlTools.load(xmlDataPath); //xmlDataPath为data.xml文件路径 Element root = document.getRootElement(); List seriesList = document.selectNodes("//series" ); //获取series集合 Iterator seriesIter=seriesList.iterator(); Element seriesElement = (Element)seriesIter.next(); //获取series第一个节点 List graphList = document.selectNodes("//graph" ); //获取graph节点集合 Iterator graphIter=graphList.iterator(); Element graphSsy = (Element)graphIter.next(); //获取graph第一个节点 Element graphSzy = (Element)graphIter.next(); //获取graph第二个节点 for(int i =0 ;i<list.size();i++){ Map tempMap = (HashMap)list.get(i); Element valueElement = seriesElement.addElement("value"); //向series节点添加vale节点 valueElement.addAttribute("xid", String.valueOf(i)); valueElement.setText(Tools.nvl(tempMap.get("NO2"))); Element valueElement2 = graphSsy.addElement("value"); valueElement2.addAttribute("xid", String.valueOf(i)); if(Double.parseDouble(tempMap.get("NO3").toString()) >=140){ valueElement2.addAttribute("bullet_color","#FF0000"); valueElement2.addAttribute("bullet_size", "12"); //valueElement2.addAttribute("description", "??????"); } valueElement2.setText(Tools.nvl(tempMap.get("NO3"))); Element valueElement3 = graphSzy.addElement("value"); valueElement3.addAttribute("xid", String.valueOf(i)); if(Double.parseDouble(tempMap.get("NO4").toString()) >=90){ valueElement3.addAttribute("bullet_color","#FF0000"); valueElement3.addAttribute("bullet_size", "12"); } valueElement3.setText(Tools.nvl(tempMap.get("NO4"))); } returnValue=XmlTools.doc2String(document); //使用XmlTools将document转换为String,XmlTools见下面

 

6. 将数据输出到xmlOut.jsp （怎样输出，我想就不用说了）

 

7. Ext 数据绑定

 

statisticPanel = Ext.extend(Ext.Panel, { id: 'statisticPanel', title : "amchart ȺПͼ", width:740, height:480, iconCls: 'icon-tab', shim:false, animCollapse:false, constrainHeader:true, closable : true, layout: 'fit', swf : 'scripts/amline/amline.swf', //swf路径 // use the flash plugin plugins : new Ext.ux.FlashPlugin(), initComponent : function() { var dufName = '曲线图标题'; var timestamp = Date.parse(new Date()); //新建时间戳 this.flashvars={ "settings_file" :"scripts/ccd/auto_resizing_chart/amline_settings.xml", //该图形对应的settings "data_file" :"CcdStatisticsAction.do?method=getStatisticsAmChart&time="+timestamp }; statisticPanel.superclass.initComponent.call(this); } });

 

OK 搞定....

注：xmlTools.java

 

package com.jun.common; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.FileWriter; import java.text.ParseException; import java.util.Date; import org.apache.log4j.Logger; import org.dom4j.Document; import org.dom4j.DocumentHelper; import org.dom4j.io.OutputFormat; import org.dom4j.io.SAXReader; import org.dom4j.io.XMLWriter; public final class XmlTools { private static Logger log = Logger.getLogger("junHis"); /** * load * 载入䶿个xml文档 * @return 成功返回Document对象，失败返回null * @param uri 文件路径 */ public static Document load(String filename) { Document document = null; try { SAXReader saxReader = new SAXReader(); document = saxReader.read(new File(filename)); } catch (Exception ex){ ex.printStackTrace(); } return document; } /** * doc2String * 将xml文档内容转为String * @return 字符䶿 * @param document */ public static String doc2String(Document document) { String s = ""; try { //使用输出流来进行转化 ByteArrayOutputStream out = new ByteArrayOutputStream(); //使用GB2312编码 OutputFormat format = new OutputFormat(" ", true, "UTF-8"); XMLWriter writer = new XMLWriter(out, format); writer.write(document); s = out.toString("UTF-8"); }catch(Exception ex) { ex.printStackTrace(); } return s; } /** * string2Document * 将字符串转为Document * @return * @param s xml格式的字符串 */ public static Document string2Document(String s) { Document doc = null; try { doc = DocumentHelper.parseText(s); }catch(Exception ex) { ex.printStackTrace(); } return doc; } /** * doc2XmlFile * 将Document对象保存为一个xml文件到本嚿 * @return true:保存成功 flase:失败 * @param filename 保存的文件名 * @param document 隿要保存的document对象 */ public static boolean doc2XmlFile(Document document,String filename) { boolean flag = true; try { /* 将document中的内容写入文件䶿 */ //默认为UTF-8格式，指定为"GB2312" OutputFormat format = OutputFormat.createPrettyPrint(); format.setEncoding("UTF-8"); FileOutputStream fos = new FileOutputStream(filename); XMLWriter writer = new XMLWriter(fos, format); writer.write(document); writer.close(); }catch(Exception ex) { flag = false; ex.printStackTrace(); } return flag; } }