Jsp 中使用 Visifire 统计图表

forgetu

浏览: 5399 次
性别:
来自: 北京

最近访客更多访客>>

glyan

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

JSP Silverlight WPF ASP.net ASP

Visifire 是一个基于Silverlight & WPF的可视化图表组件，使用Visifire可以轻松创建出可嵌入桌面程序或Web程序的动态图表。使用相同的 API，创建出的图表可运行于 Silverlight 或 WPF 环境中，也可以作为一个单独的 Silverlight 程序嵌入到任何网页中（如：Asp、Asp.net、Php、Jsp 等或 Html 页面）。

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

下面是一个小示例：

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

<%@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>

运行结果如下：