Question

我使用Google折线图来绘制使用JSP从数据库中提取的值。我目前已经有了它的工作。 data.addColumn语句是在页面加载时从数据库查询生成的。

我的问题是我还想要一些组合框，可以用来为x轴选择最小值和最大值，然后更新图形。目前我能想到的唯一方法是使用新的get参数刷新页面。

我更愿意以某种方式只刷新图表而不重新加载整个页面。这可能吗？有没有办法覆盖脚本标签，然后重新加载图表？或者还有其他方式吗？

编辑：我无法弄清楚如何将数据从数据库传递到加载页面。这是我的代码：

loader.html（包含图表和日期字段的页面）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
        function loadChart()
        {
            var xmlhttp;            
            var minDate = document.getElementById('startDate').value;
            var maxDate = document.getElementById('endDate').value;

            if (!minDate)
                minDate = 'none';
            if (!maxDate)
                maxDate = 'none';

            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById('lineChart').innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "chart-loader.jsp?min=" + minDate + '&max=' + maxDate, true);
            xmlhttp.send();
        }
    </script>
</head>

<body>
    <div id="container">

        <div id="lineChart"></div>

        <div id="startDateBox">
            <label for="startDate">Min Date:</label>
            <input id="startDate" type="text" />
        </div>
        <div id="endDateBox">
            <label for="endDate">Max Date:</label>
            <input id="endDate" type="text" />
        </div>
        <input type="button" value="Update" id="updateBtn" onclick="loadChart()" />

    </div> <!-- End container -->
</body>
</html>

chart-loader.jsp（应该获取数据并加载图表）

<%@ page import="java.sql.*, java.util.ArrayList" %>
<%      
    Connection conn;

    try {
        Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
        conn = DriverManager.getConnection("jdbc:microsoft:sqlserver://...", "user", "pass");
    }
    catch(SQLException e) 
    {
        out.println("SQLException: " + e.getMessage() + "<br/>");
        while((e = e.getNextException()) != null)
            out.println(e.getMessage() + "<br/>");
        throw new UnavailableException(this, "Cannot connect with the specified database.");
    }

    String data = "";
    String minDate = (String)request.getParameter("min");
    String maxDate = (String)request.getParameter("max");
    try
    {
        ResultSet rs;
        Statement stmt = conn.createStatement();
        if (minDate.equals("none") || maxDate.equals("none")) // First load, use whole table
        {
            rs = stmt.executeQuery("SELECT ...");
        }
        // ... more possible queries

        ArrayList<String> ptVals = new ArrayList<String>();
        ArrayList<String> colDates = new ArrayList<String>();

        while (rs.next())
        {
            ptVals.add(rs.getString("avgvalue"));
            colDates.add(rs.getString("collectiondate"));
        }           
        // ptVals.size()
        for (int i = 0; i < 5; i++)
            data += "\t\t\tdata.addRow(['" + colDates.get(i) + "'," + ptVals.get(i) + "]);\n";  

        // ... Use out.print to spit out script. 
    }
    catch(SQLException e)
    {
        data = "SQLException: " + e.getMessage() + "<br/>";
        while((e = e.getNextException()) != null)
            data += e.getMessage() + "<br/>";           
    }       
    finally
    {   // Clean up resources, close the connection.
        if(conn != null)
        {
            try { conn.close(); }
            catch (Exception ignored) {}
        }
    }
%>

加载图表的原始脚本

<script type="text/javascript">
    function drawVisualization() 
    {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Temperature');
        data.addRow(["01/01/11", 70.2]);
        data.addRow(["01/02/11", 70.0]);
        data.addRow(["01/03/11", 69.8]);
        data.addRow(["01/04/11", 70.1]);
        // Create and draw the visualization.
        new google.visualization.LineChart(document.getElementById('lineChart')).
            draw(data, {backgroundColor: 'transparent',
                        width: 700, height: 400,
                        legend: 'none',
                        hAxis: {title: 'Dates', titleTextStyle: {color: 'black', fontSize: 12, fontName: 'Verdana, Arial'}},
                        vAxis: {title: 'Temperature', titleTextStyle: {color: 'black', fontSize: 12, fontName: 'Verdana, Arial'}},
                        chartArea: {left: 80, top: 20}
                    }
                );
    }

    google.setOnLoadCallback(drawVisualization);
</script>

谢谢，莱恩

Answer 1

我们正是在我工作的地方做的（刷新谷歌图表我的意思）。我们所做的是在没有图表的情况下加载页面，只需将Ajax加载到它需要的任何容器中。然后，当你更改它上面的任何内容时，让ajax重新加载它，发送你需要的任何参数到JSP（获取新图表）。

编辑：如果没有意义，图表本身实际上是在它自己的JSP上，它被独立地注入页面（并刷新）。

所以我们的过程就是这样：

渲染主页面（图表尚未渲染）。在这个页面上，我们输入了这样的内容：

<div id="chartForData1"></div>

<script>Ajax_inject('chartForData1', 'pageThatGeneratesData1');</script>

其中Ajax_inject只是我们将数据加载到元素中的Ajax调用的包装器。现在，当页面在用户的计算机上呈现时，Ajax_inject（以及所有其他页面）将执行，从而加载到相应的div相应的呈现JSP中。这些JSP的唯一目的是获取一些参数（或者没有使用默认值），并为我们提供漂亮而漂亮的谷歌图表。

这更有意义吗？

Answer 2

我能够将其与Google Visualization API配合使用。方法如下：

我有一个HTML页面，其中包含图表的容器div。 <div id="lineChart"></div>

接下来，我在HTML页面中有两个JavaScript函数。 getChartData()函数是一个AJAX函数，它从两个输入字段获取日期范围并将它们发送到JSP页面。 JSP页面使用日期向数据库查询该范围内的记录，将它们格式化为JavaScript对象，然后使用out.print()将其发送回HTML页面。

HTML页面收到数据后，会使用eval()将收到的文本设置为JavaScript对象。最后，数据对象将发送到第二个JavaScript函数loadChart()，该函数使用数据调用Google函数并将图表加载到div。

注意：使用eval()将responseText设置为JavaScript对象才能真正发挥作用。这允许您传回许多数据。一旦你回到HTML页面，你只需将它们从JS对象中拉出来。你甚至可以在里面传递几个JS对象。

var paramsObj;
var dataObj;
eval('paramsObj = ' + xmlhttp.responseText + ";");
eval('dataObj = paramsObj.data;');
loadChart(dataObj, paramsObj.title, paramsObj.xLabel);

在这种情况下，我在一个JS对象中传递三个参数。 paramsObj.data是图表数据，它是一个嵌套对象，根据Google Visualization API格式化。我不得不再次使用eval()将嵌套的JS对象设置为单独的变量，或者它不能正确传递给loadChart()函数。 paramsObj.title和paramsObj.xLabel只是字符串。

使用JSP动态生成Google Chart

2 个答案: