点击这里给我发消息 点击这里给我发消息

Jsp中使用Visifire统计图表

添加时间:2013-12-7
    相关阅读: 页面 HTML JSP 项目

  Visifire 统计图表前面几篇文章中已经做了介绍了,Visifire 可以嵌入到Asp、Asp.net、Php、Jsp等页面中,但是在这些页面中使用 Visifire 时通过 javascript 或服务端代码中拼接 xmal 格式的字符串时非常不便,稍不注意就有拼错的可能。为了方便在 Jsp 页面中使用 Visifire 统计图表,做了一个可以根据设置的值自动生成 xaml 格式的字符串的小项目。

  项目中的几个类分别和 Visifire 中相应的元素对应,通过这个小项目可以非常方便的在 jsp 中使用 Visifire 。

  下面是一个小示例:

  首先在 jsp 项目中引用 JspFire.jar 包,然后就可以在 jsp 中使用 JspFire 创建 Visifire 图表啦。

  view sourceprint?<%@page contentType="text/html" import="net.designbased.jspfire.*" pageEncoding="UTF-8"%>

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  "http://www.w3.org/TR/html4/loose.dtd">

  <%

  Chart chart = new Chart(); // 创建一个 Chart 实例

  chart.setAnimationEnabled(true);

  chart.setView3D(true);

  chart.setHeight(300d);

  chart.setWidth(500d);

  Title title = new Title(); // 创建一个 Title 实例

  title.setEnabled(true);

  title.setText("Jsp 使用 Visifire 示例");

  chart.addTitle(title);

  DataSeries series = new DataSeries(); // 创建一个 Pie 图表

  series.setRenderAs(ChartType.Pie);

  series.setBevel(true);

  DataPoint dp1 = new DataPoint(); // 创建数据结点

  dp1.setYValue("10");

  dp1.setLegendText("很好");

  series.AddDataPoint(dp1);

  DataPoint dp2 = new DataPoint();

  dp2.setYValue("14");

  dp2.setLegendText("一般");

  series.AddDataPoint(dp2);

  DataPoint dp3 = new DataPoint();

  dp3.setYValue("32");

  dp3.setLegendText("很强大");

  series.AddDataPoint(dp3);

  DataPoint dp4 = new DataPoint();

  dp4.setYValue("21");

  dp4.setLegendText("很烂");

  series.AddDataPoint(dp4);

  chart.addSeries(series);

  String xaml = chart.toString();

  %>

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>JSP Visifire Example</title>

  <script type="text/javascript" src="visifire/Visifire.js"></script>

  </head>

  <body>

  <div id="Chart<%= chart.getID()%>" >

  <script type="text/javascript" >

  // 创建 Visifire 图表

  var vChart = new Visifire('visifire/SL.Visifire.Charts.xap', "MyChart", 500, 300);

  // 图表数据

  var chartXml = '<%= xaml%>';

  // 设置图表的数据

  vChart.setDataXml(chartXml);

  // 输出图表

  vChart.render("Chart<%= chart.getID()%>");

  </script>

  </div>

  </body>

  </html>

  运行结果如下:

  这个项目现在还没有实现 Visifire 的全部功能,我会慢慢完善的,直到把Visifire的全部功能实现,同时还会做一个用于Asp.net的相同的项目。

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册