堆棧內存溢出
  簡體   English   中英

高圖-從Servlet到JSP

[英]Highcharts - From Servlet to JSP

 原文  2014-08-04 18:55:31  7   2    java/ jquery/ jsp/ servlets/ highcharts

問題描述

我對Highcharts和servlet / jsp有一些問題。

我對AJAX和JQUERY不太熟悉。

我想在jsp頁面2實時行系列中顯示通過Java servlet從數據庫加載的相關數據（x，y）。

這是我的jsp中的代碼： 

<script type="text/javascript">
$(function () {

    var seriesOptions = [];
    $.getJSON('Grafico', function(data) {

        // Populate series
        for (i = 0; i < data.DeltaRealTime.length; i++){
            seriesOptions[i] = {
                name: data.DeltaRealTime[i].name,
                data: [data.DeltaRealTime[i].key, parseFloat(data.DeltaRealTime[i].value)]
            };
        }

        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,

                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        setInterval(function() {

                            $.getJSON('Grafico', function(data) {
                                // Populate series
                                for (i = 0; i < data.DeltaRealTime.length; i++){
                                    var chart = $('#container').highcharts();
                                    chart.series[i].addPoint([data.DeltaRealTime[i].key, parseFloat(data.DeltaRealTime[i].value)]);
                                }
                            });
                        }, 1000);
                    }
                }
            },
            title: {
                text: "Valori Delta"
            },
            xAxis: {
                title: {
                    text: 'Campione'
                }
            },
            yAxis: {
                labels: {
                    format: '{value:.1f}'
                },
                title: {
                    text: 'Delta(f)'
                },
            },
            series: seriesOptions
        });
    });
});
</script>

這是“ Grafico” servlet： 

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    response.setContentType("text/json");
    PrintWriter out = response.getWriter();

    try {

        HttpSession session = request.getSession();

        Seriale seriale = (Seriale)session.getAttribute("seriale");

        if(seriale == null)
            System.out.println("SERIALE=NULL");
        else {
            if(seriale.getSeriale().isOpen())
                System.out.println("SERIALE APERTA");

            System.out.println("ID SESSIONE DATI="+seriale.getSessioneDati().getId());
        }


        if(seriale != null && seriale.getSeriale().isOpen()) {

            System.out.println("INIZIO A LEGGERE I DATI DAL DB");

            Db db = new Db();
            db.apriConnessione();

            String sql = "SELECT * FROM MisuraRiposo ORDER BY id DESC LIMIT 1";
            PreparedStatement ps = db.getConnection().prepareStatement(sql);

            ResultSet rs = ps.executeQuery();

            Map<String, String> data1 = new HashMap<String,String>();
            Map<String, String> data2 = new HashMap<String,String>();

            if(rs.next()) {
                data1.put("name", "f1");
                data1.put("key", rs.getString("campione"));
                data1.put("value", rs.getString("f1"));
                data2.put("name", "f2");
                data2.put("key", rs.getString("campione"));
                data2.put("value", rs.getString("f2"));
            }

            rs.close();
            ps.close();
            db.chiudiConnessione();

            JSONObject json1 = new JSONObject(data1);
            JSONObject json2 = new JSONObject(data2);
            JSONArray array = new JSONArray();
            array.put(json1);
            array.put(json2);
            JSONObject finalObject = new JSONObject();
            finalObject.put("DeltaRealTime", array);

            out.write(finalObject.toString());
        }

    }
    catch(JSONException jse) {
        jse.printStackTrace();
    }
    catch(Exception e) {
        e.printStackTrace();
    }
    finally {
        out.flush();
        out.close();

        System.out.println("Fine servlet grafico");
    }

}

問題是我無法獲得所需的行為。 我只獲得斷開連接的點。

在此先感謝您的幫助:)

2 個解決方案

解決方案1
 0  2014-08-26 19:46:21

我設法在jsp頁面12中顯示了實時行系列，其中包含通過Java servlet從數據庫加載的相關數據（x，y）。 該系列每秒更新一次。 在Chrome和Firefox中，所有功能都運行良好。 相反，我遇到Internet Explorer 11.0.9600.17239的問題，該圖表不會更新（它永遠保留在第一個圖表圖像上）。 但是，如果我更改為兼容性視圖（F12），則該圖表在Internet Explorer中也可以很好地工作。 我不明白為什么。 你能幫助我嗎？ 很抱歉，如果代碼不是很優雅。

這是我的jsp中的代碼： 

<script type="text/javascript">
$(document).ready(function() {
//fare cose jQuery quando DOM è pronto
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

    var processed_json = [];
    $.getJSON('Grafico', function(data) {

        // draw chart
        $('#container').highcharts({
        chart: {
            zoomType: 'x',
            type: "spline",
            //animation: Highcharts.svg, // don't animate in old IE
            events: {
                load: function() {

                    // set up the updating of the chart each second
                    setInterval(function() {

                        $.getJSON('Grafico', function(data) {
                            // Populate series
                            for (i = 0; i < data.DeltaRealTime.length; i++){
                                var chart = $('#container').highcharts();
                                chart.series[i].addPoint([parseInt(data.DeltaRealTime[i].key),parseFloat(data.DeltaRealTime[i].value)]);
                            }
                        });
                    }, 1000);
                }
            }
        },
        title: {
            text: "Valori Delta"
        },
        xAxis: {
            title: {
                text: 'Campione'
            },
            labels: {
                step: 1
            }
        },
        yAxis: {
            labels: {
                format: '{value:.1f}'
            },
            title: {
                text: 'Delta(f)'
            }
        },
        series: [{
            name: 'f1',
            data: []
        }, {
            name: 'f2',
            data: []
        }, {
            name: 'f3',
            data: []
        }, {
            name: 'f4',
            data: []
        }, {
            name: 'f5',
            data: []
        }, {
            name: 'f6',
            data: []
        }, {
            name: 'f7',
            data: []
        }, {
            name: 'f8',
            data: []
        }, {
            name: 'f9',
            data: []
        }, {
            name: 'f10',
            data: []
        }, {
            name: 'f11',
            data: []
        }, {
            name: 'f12',
            data: []
        }]
    });
});

}）;

這是“ Grafico” servlet： 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    doPost(request, response);

}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    System.out.println("Avvio servlet grafico");

    Map<String, String> f1 = new HashMap<String,String>();
    Map<String, String> f2 = new HashMap<String,String>();
    Map<String, String> f3 = new HashMap<String,String>();
    Map<String, String> f4 = new HashMap<String,String>();
    Map<String, String> f5 = new HashMap<String,String>();
    Map<String, String> f6 = new HashMap<String,String>();
    Map<String, String> f7 = new HashMap<String,String>();
    Map<String, String> f8 = new HashMap<String,String>();
    Map<String, String> f9 = new HashMap<String,String>();
    Map<String, String> f10 = new HashMap<String,String>();
    Map<String, String> f11 = new HashMap<String,String>();
    Map<String, String> f12 = new HashMap<String,String>();

    response.setContentType("text/json");
    PrintWriter out = response.getWriter();

    try {

        HttpSession session = request.getSession();
        Seriale seriale = (Seriale)session.getAttribute("seriale");

        if(seriale == null)
            System.out.println("SERIALE=NULL");
        else {
            if(seriale.getSeriale().isOpen())
                System.out.println("SERIALE APERTA");

            System.out.println("ID SESSIONE DATI="+seriale.getSessioneDati().getId());
        }

        Delta delta = new Delta();

        if(seriale != null && seriale.getSeriale().isOpen() && seriale.getPrimaMisura() != null) {

            MisuraCampione primaMisura = new MisuraCampione(); 
            primaMisura = seriale.getPrimaMisura();
            System.out.println("***STAMPA PRIMA MISURA***");
            primaMisura.stampa();

            System.out.println("INIZIO A LEGGERE I DATI DAL DB");

            Db db = new Db();
            db.apriConnessione();

            String sql = "SELECT * FROM MisuraRiposo ORDER BY id DESC LIMIT 1";
            PreparedStatement ps = db.getConnection().prepareStatement(sql);

            System.out.println("QUERY=" + ps.toString());

            ResultSet rs = ps.executeQuery();

            if(rs.next()) {
                MisuraCampione misuraAttuale = new MisuraCampione();
                misuraAttuale.setCampione(rs.getInt("campione"));
                misuraAttuale.setF1(rs.getBigDecimal("f1"));
                misuraAttuale.setF2(rs.getBigDecimal("f2"));
                misuraAttuale.setF3(rs.getBigDecimal("f3"));
                misuraAttuale.setF4(rs.getBigDecimal("f4"));
                misuraAttuale.setF5(rs.getBigDecimal("f5"));
                misuraAttuale.setF6(rs.getBigDecimal("f6"));
                misuraAttuale.setF7(rs.getBigDecimal("f7"));
                misuraAttuale.setF8(rs.getBigDecimal("f8"));
                misuraAttuale.setF9(rs.getBigDecimal("f9"));
                misuraAttuale.setF10(rs.getBigDecimal("f10"));
                misuraAttuale.setF11(rs.getBigDecimal("f11"));
                misuraAttuale.setF12(rs.getBigDecimal("f12"));
                misuraAttuale.setT1(rs.getBigDecimal("t1"));
                misuraAttuale.setT2(rs.getBigDecimal("t2"));
                misuraAttuale.setTo(rs.getBigDecimal("to"));
                misuraAttuale.setFt(rs.getBigDecimal("ft"));
                misuraAttuale.setRh(rs.getBigDecimal("rh"));
System.out.println("***STAMPA MISURA ATTUALE***");
misuraAttuale.stampa();

                delta = delta.calcolaDelta(primaMisura, misuraAttuale);
System.out.println("***STAMPA DELTA***");
delta.stampa();
            }

            rs.close();
            ps.close();
            db.chiudiConnessione();

        }

        System.out.println("CAMPIONE="+delta.getCampione()+"-"+delta.getCampione2());
        System.out.println("F1="+delta.getF1());
        System.out.println("F2="+delta.getF2());

        f1.put("key", Integer.toString(delta.getCampione2()));
        f1.put("value", delta.getF1().toString());
        f2.put("key", Integer.toString(delta.getCampione2()));
        f2.put("value", delta.getF2().toString());
        f3.put("key", Integer.toString(delta.getCampione2()));
        f3.put("value", delta.getF3().toString());
        f4.put("key", Integer.toString(delta.getCampione2()));
        f4.put("value", delta.getF4().toString());
        f5.put("key", Integer.toString(delta.getCampione2()));
        f5.put("value", delta.getF5().toString());
        f6.put("key", Integer.toString(delta.getCampione2()));
        f6.put("value", delta.getF6().toString());
        f7.put("key", Integer.toString(delta.getCampione2()));
        f7.put("value", delta.getF7().toString());
        f8.put("key", Integer.toString(delta.getCampione2()));
        f8.put("value", delta.getF8().toString());
        f9.put("key", Integer.toString(delta.getCampione2()));
        f9.put("value", delta.getF9().toString());
        f10.put("key", Integer.toString(delta.getCampione2()));
        f10.put("value", delta.getF10().toString());
        f11.put("key", Integer.toString(delta.getCampione2()));
        f11.put("value", delta.getF11().toString());
        f12.put("key", Integer.toString(delta.getCampione2()));
        f12.put("value", delta.getF12().toString());

        JSONObject jsonF1 = new JSONObject(f1);
        JSONObject jsonF2 = new JSONObject(f2);
        JSONObject jsonF3 = new JSONObject(f3);
        JSONObject jsonF4 = new JSONObject(f4);
        JSONObject jsonF5 = new JSONObject(f5);
        JSONObject jsonF6 = new JSONObject(f6);
        JSONObject jsonF7 = new JSONObject(f7);
        JSONObject jsonF8 = new JSONObject(f8);
        JSONObject jsonF9 = new JSONObject(f9);
        JSONObject jsonF10 = new JSONObject(f10);
        JSONObject jsonF11 = new JSONObject(f11);
        JSONObject jsonF12 = new JSONObject(f12);

        JSONArray array = new JSONArray();
        if(delta.getCampione() > 0) {
            array.put(jsonF1);
            array.put(jsonF2);
            array.put(jsonF3);
            array.put(jsonF4);
            array.put(jsonF5);
            array.put(jsonF6);
            array.put(jsonF7);
            array.put(jsonF8);
            array.put(jsonF9);
            array.put(jsonF10);
            array.put(jsonF11);
            array.put(jsonF12);
        }

        JSONObject finalObject = new JSONObject();
        finalObject.put("DeltaRealTime", array);

System.out.println("FINALOBJECT=" + finalObject.toString());                
        out.write(finalObject.toString());

    }
    catch(SQLException sqle) {
        sqle.printStackTrace();
    }
    catch(JSONException jse) {
        jse.printStackTrace();
    }
    catch(Exception e) {
        e.printStackTrace();
    }
    finally {
        out.flush();
        out.close();

        System.out.println("Fine servlet grafico");
    }

}

“ Grafico” java servlet僅將Highcharts用於顯示12個實時序列的JSON編碼字符串返回到jsp頁面。

傳遞給jsp頁面的JSON字符串如下所示：

{ “DeltaRealTime”：[{ “值”： “0.1”， “關鍵”： “371”}，{ “值”： “0.1”， “關鍵”： “371”}，{ “值”： “0.0” “鍵”： “371”}，{ “值”： “0.0”， “鍵”： “371”}，{ “值”： “0.0”， “鍵”： “371”}，{ “值” ： “ - 0.1”， “關鍵”： “371”}，{ “值”： “0.2”， “關鍵”： “371”}，{ “值”： “0.3”， “關鍵”： “371”} ，{ “值”： “ - 0.2”， “關鍵”： “371”}，{ “值”： “0.0”， “鍵”： “371”}，{ “值”： “0.0”， “鑰匙” ： “371”}，{ “值”： “0.1”， “關鍵”： “371”}]}

然后，javascript setInterval函數通過通過函數chart.series [i] .addPoint（[parseInt（data.DeltaRealTime [i] .key））向每個系列添加新的（x，y）點，每秒更新一次圖形。 parseFloat（data.DeltaRealTime [I]。價值）]）;

新點與上一點類似：

{ “DeltaRealTime”：[{ “值”： “ - 0.1”， “關鍵”： “372”}，{ “值”： “ - 0.1”， “關鍵”： “372”}，{ “值”：” -0.1" ， “關鍵”： “372”}，{ “值”： “ - 0.2”， “關鍵”： “372”}，{ “值”： “ - 0.2”， “關鍵”： “372”} ，{ “值”： “ - 0.4”， “關鍵”： “372”}，{ “值”： “0.0”， “鍵”： “372”}，{ “值”： “0.1”， “關鍵” ： “372”}，{ “值”： “0.1”， “關鍵”： “372”}，{ “值”： “ - 0.5”， “關鍵”： “372”}，{ “值”：“ - 0.2" ， “關鍵”： “372”}，{ “值”： “ - 0.1”， “關鍵”： “372”}]}

解決方案2
 0  2014-09-03 17:10:17

我發現了問題。 在Internet Explorer上似乎是JQUERY問題。 

$.getJSON('Grafico', function(data) { ... }

在IE11中不起作用。

我用 

$.ajax({
                        type: $('#form1').attr('method'),
                        url: "Grafico",
                        cache:false,
                        dataType:'json',
                        success: function(data){
                            for (var i = 0; i < data.DeltaRealTime.length; i++){
                                chart1.series[i].addPoint([parseInt(data.DeltaRealTime[i].key),parseFloat(data.DeltaRealTime[i].value)]);
                            }
                        }
                    });

一切都很好。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從servlet到JSP的輸出 從 servlet 到 JSP 的 ArrayList 從JSP調用servlet JSP-SERVLET-從Servlet調用JavaScript函數 將值從jsp傳遞到servlet，但是servlet不可用 將值從jsp發送到servlet，然后再返回到jsp 從jsp調用servlet並返回jsp 將對象從JSP設置為servlet 從servlet轉發到jsp的請求 將ArrayList從servlet傳遞給JSP
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM