Jsp 中使用 Visifire 統計圖表

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Visifire 統計圖表前面幾篇文章中已經做了介紹了，Visifire 可以嵌入到Asp、Asp.net、Php、Jsp等頁面中，但是在這些頁面中使用 Visifire 時通過 javascript 或服務端代碼中拼接 xmal 格式的字串時非常不便，稍不注意就有拼錯的可能。為了方便在 Jsp 頁面中使用 Visifire 統計圖表，做了一個可以根據設定的值自動產生 xaml 格式的字串的小項目。

項目中的幾個類分別和 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>運行結果如下：

這個項目現在還沒有實現 Visifire 的全部功能，我會慢慢完善的，直到把Visifire的全部功能實現，同時還會做一個用於Asp.net的相同的項目。

範例程式碼下載：JspFireExample.zip 或者 http://zdd.me/myfiles

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More