黄色网址大全免费-黄色网址你懂得-黄色网址你懂的-黄色网址有那些-免费超爽视频-免费大片黄国产在线观看

專注Java教育14年 全國咨詢/投訴熱線：400-8080-105
動(dòng)力節(jié)點(diǎn)LOGO圖
始于2009，口口相傳的Java黃埔軍校
首頁 學(xué)習(xí)攻略 Java學(xué)習(xí) Java生成圖表的方法

Java生成圖表的方法

更新時(shí)間：2022-12-02 11:00:42 來源：動(dòng)力節(jié)點(diǎn) 瀏覽1536次

FusionCharts 是一個(gè) JavaScript 圖表庫，使您能夠在 JavaScript 中創(chuàng)建交互式圖表、儀表、地圖和儀表板。我們?yōu)?FusionCharts 構(gòu)建了一個(gè)簡單的服務(wù)器端 Java (JSP) 包裝器。該FusionCharts server-side JSP包裝器使您可以輕松地將豐富的交互式圖表添加到任何 JSP 項(xiàng)目中。使用包裝器，您可以在瀏覽器中創(chuàng)建圖表，而無需編寫任何 JavaScript 代碼。讓我們看看如何安裝 FusionCharts 并使用 FusionCharts 服務(wù)器端 JSP 包裝器呈現(xiàn)圖表。

先決條件

我們假設(shè)您已經(jīng)在系統(tǒng)中安裝了 Java。如果沒有，您可以訪問如何安裝 Java頁面并按照安裝步驟進(jìn)行操作。您還需要一個(gè)本地 Web 服務(wù)器，例如 tomcat 服務(wù)器(用于運(yùn)行 Java 代碼的“純 Java”HTTP Web服務(wù)器環(huán)境)，它將實(shí)現(xiàn) jsp 文件。你可以在這里下載。

FusionCharts JSP包裝器需要 JAVA 6 或更高版本。

安裝和包括依賴項(xiàng)

下載 FusionCharts 庫以獲取jsp-fusioncharts包裝器。

創(chuàng)建一個(gè)新的 Java 動(dòng)態(tài) Web 項(xiàng)目(我們將其命名為FusionchartsJava)并按照以下步驟操作：

創(chuàng)建一個(gè)名為fusionchartsinside的新包Java resources > src?，F(xiàn)在將jsp-fusioncharts包裝器 ( fusioncharts-suite-xt > integrations > java > fusioncharts-wrapper) 復(fù)制到新創(chuàng)建的 fusioncharts 包 ( Java resources > src>fusioncharts)。

復(fù)制項(xiàng)目 (FusionchartsJava) 目錄中存在的文件夾中js包含所有 javascript 文件 (fusioncharts-suite-xt > js) 的目錄(僅限本地文件) 。WebContent

在 WebContent 目錄中創(chuàng)建一個(gè)index.jsp文件。

目錄結(jié)構(gòu)如下所示：

配置你的圖表

首先，您必須處理樣式、定位并為您的圖表提供上下文。請按照以下步驟操作：

在該index.jsp文件中，我們首先包含 Fusioncharts Javascript 文件以將樣式應(yīng)用于圖表。

// Include FusionCharts core file
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
// Include FusionCharts Theme file
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

在 index.jsp 文件中添加圖表屬性。FusionCharts接受JSON格式的數(shù)據(jù)，所以我們將這些屬性轉(zhuǎn)換成JSON格式。我們正在創(chuàng)建一個(gè)顯示“石油儲(chǔ)量最多的國家”的圖表，并相應(yīng)地定義圖表屬性。

// store chart config name-config value pair
<%
    Map<String, String> chartConfig = new HashMap<String, String>();
    chartConfig.put("caption", "Countries With Most Oil Reserves [2017-18]");
    chartConfig.put("subCaption", "In MMbbl = One Million barrels");
    chartConfig.put("xAxisName", "Country");
    chartConfig.put("yAxisName", "Reserves (MMbbl)");
    chartConfig.put("numberSuffix", "k");
    chartConfig.put("theme", "fusion");
    StringBuilder jsonData = new StringBuilder();
    // json data to use as chart data source
    jsonData.append("{'chart':{");
    for(Map.Entry conf:chartConfig.entrySet())
    {
        jsonData.append("'" + conf.getKey()+"':'"+conf.getValue() + "',");
    }
    jsonData.replace(jsonData.length() - 1, jsonData.length() ,"},");
%>

準(zhǔn)備數(shù)據(jù)

正如上面已經(jīng)提到的，讓我們創(chuàng)建一個(gè)圖表來顯示“擁有最多石油儲(chǔ)備的國家”。各國石油儲(chǔ)量數(shù)據(jù)如下表所示：

由于我們正在繪制單個(gè)數(shù)據(jù)集，因此讓我們創(chuàng)建一個(gè)二維柱狀圖，其中“國家/地區(qū)”作為 x 軸上的數(shù)據(jù)標(biāo)簽，石油儲(chǔ)量數(shù)量作為 y 軸上的數(shù)據(jù)值。讓我們?yōu)閱蜗盗袌D表準(zhǔn)備數(shù)據(jù)。

FusionCharts接受JSON格式的數(shù)據(jù)，所以，我們先添加數(shù)據(jù)，再轉(zhuǎn)成JSON格式。

//store label-value pair
<%
    Map<String, Integer> dataValuePair = new HashMap<String, Integer>();
    dataValuePair.put("Venezuela", 290);
    dataValuePair.put("Saudi", 260);
    dataValuePair.put("Canada", 180);
    dataValuePair.put("Iran", 140);
    dataValuePair.put("Russia", 115);
    dataValuePair.put("UAE", 100);
    dataValuePair.put("US", 30);
    dataValuePair.put("China", 30);
    StringBuilder data = new StringBuilder();
    // build data object from label-value pair
    data.append("'data':[");
    for(Map.Entry pair:dataValuePair.entrySet())
    {
        data.append("{'label':'" + pair.getKey() + "','value':'" + pair.getValue() +"'},");
    }
    data.replace(data.length() - 1, data.length(),"]");
    jsonData.append(data.toString());
    jsonData.append("}");
%>

創(chuàng)建你的圖表

jsp-fusioncharts讓我們使用顯示“石油儲(chǔ)量最多的國家/地區(qū)”的包裝器創(chuàng)建一個(gè)二維柱狀圖。

該index.jsp文件將包含chart constructor,attributes和datasource呈現(xiàn)圖表所需的。合并代碼如下所示：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@page import="java.util."_ %>
<%@page import=_"fusioncharts.FusionCharts"* %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http - equiv =  "Content-Type"  content =  "text/html; charset=ISO-8859-1" >
    <title> FusionCharts | My First Chart </title> <script type = "text/javascript"
src = "https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"> </script> <script type = "text/javascript"
src = "https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"> </script> <body>
    <div id =  "chart" > </div>
<%
            // store chart config name-config value pair
            Map<String, String> chartConfig = new HashMap<String, String>();
            chartConfig.put("caption", "Countries With Most Oil Reserves [2017-18]");
            chartConfig.put("subCaption", "In MMbbl = One Million barrels");
            chartConfig.put("xAxisName", "Country");
            chartConfig.put("yAxisName", "Reserves (MMbbl)");
            chartConfig.put("numberSuffix", "k");
            chartConfig.put("theme", "fusion");
            //store label-value pair
            Map<String, Integer> dataValuePair = new HashMap<String, Integer>();
            dataValuePair.put("Venezuela", 290);
            dataValuePair.put("Saudi", 260);
            dataValuePair.put("Canada", 180);
            dataValuePair.put("Iran", 140);
            dataValuePair.put("Russia", 115);
            dataValuePair.put("UAE", 100);
            dataValuePair.put("US", 30);
            dataValuePair.put("China", 30);
            StringBuilder jsonData = new StringBuilder();
            StringBuilder data = new StringBuilder();
            // json data to use as chart data source
            jsonData.append("{'chart':{");
            for(Map.Entry conf:chartConfig.entrySet())
            {
                jsonData.append("'" + conf.getKey()+"':'"+conf.getValue() + "',");
            }
            jsonData.replace(jsonData.length() - 1, jsonData.length() ,"},");
            // build  data object from label-value pair
            data.append("'data':[");
            for(Map.Entry pair:dataValuePair.entrySet())
            {
                data.append("{'label':'" + pair.getKey() + "','value':'" + pair.getValue() +"'},");
            }
            data.replace(data.length() - 1, data.length(),"]");
            jsonData.append(data.toString());
            jsonData.append("}");
            // Create chart instance
            // charttype, chartID, width, height,containerid, data format, data
            FusionCharts firstChart = new FusionCharts(
                "column2d",
                "first_chart",
                "700",
                "400",
                "chart",
                "json",
                jsonData.toString()
            );
        %>
<%= firstChart.render() %> </body> </html>

渲染圖表

使用在文件中創(chuàng)建圖表的容器，index.jsp在本地服務(wù)器上運(yùn)行此文件，默認(rèn)情況下它在 localhost:8080 上運(yùn)行。您應(yīng)該能夠看到如下所示的圖表。

如果您在頁面上遇到 JavaScript 錯(cuò)誤，請檢查您的瀏覽器控制臺(tái)以了解確切的錯(cuò)誤并進(jìn)行相應(yīng)修復(fù)。

  • 男 女

提交申請后，顧問老師會(huì)電話與您溝通安排學(xué)習(xí)

免費(fèi)課程推薦 >>
技術(shù)文檔推薦 >>
主站蜘蛛池模板： 夜夜躁天天躁很很躁 | 亚洲一区二区成人 | 丁香婷婷色综合 | 国产人成| 操操干干 | 黄色网址在线免费看 | 色网综合 | 亚洲日本视频 | 亚洲激情 | 免费h福利漫画网站在线 | 中国一及黄色片 | 久久五月视频 | 老司机在线永久免费视频观看 | 日本国产欧美 | 中文字幕亚洲第一 | 成年人免费网站视频 | 一个人在线免费观看www视频 | 天天摸日日干 | 成 人 免费观看网站 | 99精品视频在线播放2 | 欧美一区二区三区在观看 | 美女下面粉嫩粉嫩冒白浆高清 | gogo全球高清大尺度美女人体 | free×xx性欧美漫画 | 成 人 黄 色 小 说网 | 极品成人 | 日本韩国免费 | 一本大道香蕉在线 观看 | 午夜国产福利 | 中文字幕视频免费 | 欧美性xxxx极品高清3d | 一级乱理中文字幕韩国 | 国产色婷婷精品综合在线手机播放 | 精品亚洲欧美中文字幕在线看 | 日本一二区视频 | 99在线热播精品免费 | 亚洲一区色图 | 精品亚洲欧美高清不卡高清 | 国产黄色在线免费观看 | 九九久久精品视频 | 天天爱夜夜做 |