使用jscharts进行结果显示
来源：互联网 发布：java iterator用法 编辑：程序博客网 时间：2024/06/06 05:32
使用jscharts进行结果显示
需求
读取.txt文件，并使用html显示结果。
cpu.txt文件的内容：84.072.047.047.047.0...方法
1，使用js读取文件，封装成jsCharts要求格式的数据，使用jsCharts进行绘图。
2，jsCharts可以使用array[][] 二维数组，或者.xml或者.json的格式的数据。 下面使用了前两种方法。 需要说明的是，因为js读取本地文件是非法的，只能使用兼容IE的浏览器进行打开，如IE，QQ浏览器，360浏览器的兼容模式等。
具体如下
直接使用js读取
<html> <head> <title>JSChart</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="jscharts.js"></script> </head> <body> <div id="result"> <h3>CPU 数据</h3><div id="cpu">Loading graph...</div> <script type="text/javascript"> function draw(file,id,ylabel) { var pathArray = new String(document.location.pathname); var index = pathArray.lastIndexOf("/"); var path = pathArray.substr(1,index); var fso=new ActiveXObject("Scripting.FileSystemObject"); var f=fso.OpenTextFile(path + file ,1); var arr = f.ReadAll(); var arrs = arr.split("\r\n"); var myData = new Array(arrs.length-1); for(var i=0;i<arrs.length-1;i++) myData[i] = [i,parseFloat(arrs[i])]; var average=0; for(var j=0;j<arrs.length-1;j++) average += myData[j][1]; average = average/(arrs.length-1); var myChart = new JSChart(id, 'line'); myChart.setDataArray(myData); myChart.setTitle( id+' with Average'+ Math.round(average * 100) / 100 ); myChart.setAxisNameX('间隔5s的数据点'); myChart.setAxisNameY(ylabel); myChart.setAxisPaddingLeft(50); myChart.setAxisPaddingRight(50); myChart.setAxisPaddingTop(50); myChart.setAxisPaddingBottom(40); myChart.resize(900,400); myChart.draw(); } draw("cpu.txt","cpu","%"); </script> </div> </body></html>输出结果
jsCharts使用.xml格式
首先将.txt，使用java读取并生成.xml文件，然后在html中使用js读取。
**生成的cpu.xml格式的文件：**<?xml version="1.0"?><JSChart> <dataset type="line"> <data unit="0" value="84.0"/> <data unit="1" value="72.0"/> <data unit="2" value="47.0"/> <data unit="3" value="47.0"/> <data unit="4" value="47.0"/> <data unit="5" value="47.0"/> <data unit="6" value="47.0"/> <data unit="7" value="47.0"/></dataset> <optionset> <option set="setLineColor" value="'#8D9386'"/> <option set="setLineWidth" value="1"/> <option set="setTitleColor" value="'#7D7D7D'"/> <option set="setAxisColor" value="'#9F0505'"/> <option set="setGridColor" value="'#a4a4a4'"/> <option set="setAxisValuesColor" value="'#333639'"/> <option set="setAxisNameColor" value="'#333639'"/> <option set="setTextPaddingLeft" value="0"/> <option set="setSize" value="900,400"/> </optionset> </JSChart>读取cpu.xml的html文件：
<html><head> <title>JSChart</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="jscharts.js"></script></head><body> <div id="result"> <h3>CPU 数据</h3><div id="cpu">Loading graph...</div> <script type="text/javascript"> var myChart = new JSChart('cpu', 'line'); myChart.setDataXML("cpu_xml.xml"); myChart.draw(); </script> </div></body></html>读取.txt文件生成.xml格式，使用java完成该工作：
public class XmlMaker { private static final String XML_PATH = "D:/Users/pycode/AndroidMonitor/cpu_xml.xml"; private static final String DATA_PATH = "D:/Users/pycode/AndroidMonitor/cpu.txt"; List<String> list = new ArrayList<String>(); /** * 解析xx.dat存储到map中 */ public void parseFile() { File file = new File(DATA_PATH); String encoding="GBK"; if(null==file) return; try { BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(new FileInputStream(file))); String line = null; while((line=bufferedReader.readLine())!=null) { String array = line.trim(); //空格分隔 if(null==array ||array.isEmpty()) continue; list.add(array); } System.out.println(list.size()); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } /** * 将map中的数据写到到xml中 */ public void writeXmlFromMap() { if(null==list || list.size()==0) return; //写入xml File file = new File(XML_PATH); try { BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file, false))); bufferedWriter.write( "<?xml version=\"1.0\"?>\n" + "<JSChart>\n" + "\t<dataset type=\"line\">\n"); int pos = 1; for(int i=0;i<list.size();i++) bufferedWriter.write("\t\t<data unit=\""+i+"\" value=\""+list.get(i)+"\"/>\n"); bufferedWriter.write( "</dataset>\n" + "\t<optionset>\n" + "\t\t<option set=\"setLineColor\" value=\"'#8D9386'\"/>\n" + "\t\t<option set=\"setLineWidth\" value=\"1\"/>\n" + "\t\t<option set=\"setTitleColor\" value=\"'#7D7D7D'\"/>\n" + "\t\t<option set=\"setAxisColor\" value=\"'#9F0505'\"/>\n" + "\t\t<option set=\"setGridColor\" value=\"'#a4a4a4'\"/>\n" + "\t\t<option set=\"setAxisValuesColor\" value=\"'#333639'\"/>\n" + "\t\t<option set=\"setAxisNameColor\" value=\"'#333639'\"/>\n" + "\t\t<option set=\"setTextPaddingLeft\" value=\"0\"/>\n" + "\t\t<option set=\"setSize\" value=\"900,400\"/>\n" + "\t</optionset>\n " + "</JSChart>"); bufferedWriter.flush(); bufferedWriter.close(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } public static void main(String[] args){ XmlMaker maker = new XmlMaker(); maker.parseFile(); maker.writeXmlFromMap(); }} 0 0
- 使用jscharts进行结果显示
- 使用lucene将索引结果进行高亮显示
- jsCharts插件的使用和去图标(提供jscharts无图标下载)
- 使用UISearchDisplayController显示搜索结果
- 使用json实现查询条件传回Action进行hql语句拼接查询实现在结果中查询功能在datagrid中显示查询结果
- 使用SnpEff 对SNP结果进行分析
- 使用moogoDB进行模糊查询查不出结果
- 面试题：如何对查询结果进行分页显示
- LuceneSearch 现在要对查询结果进行排序的显示。
- 使用一个信息窗口显示查询结果
- 使用kml格式显示查询结果
- 使用JSP显示Jena解析结果
- 使用select2实现查询结果分页显示
- jscharts学习
- 使用对象进行分页显示
- ajax 通过搜索页面进行搜索，通过结果页面显示结果
- 使用带谓语的XPath进行结果过滤
- Mysql 使用with rollup对聚合结果进行聚合
- java中的内部类
- 帝国ECMS教程:上一篇下一篇自定义综合代码
- android学习十（android的SharePreferences存储）
- 关于未来
- UML与软件开发的关系
- 使用jscharts进行结果显示
- Ural 1309 Dispute (递推)
- 理解操作系统4--文件管理疑惑总结
- CSS3-基本选择器语法（实战）
- ACM培训练习总结 2
- 英语学习 3 python
- hdu 1824 2-sat问题（判断）
- CGLib动态代理原理及实现
- nyoj106背包问题（贪心）
