饼图使用谷歌图表

时间:2014-09-12 07:09:31

标签: java javascript html jsp

我正在尝试运行这个javascript代码,它从数据库中检索数据并创建一个字符串,这个字符串被传递给draw方法,该方法创建一个饼图,但它没有显示任何东西,请帮助....

<%@page import="java.io.File"%>
<%@page import="java.sql.PreparedStatement"%>

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="Persistence.FolderBroker"%>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<%
    FolderBroker fb = new FolderBroker();
    Connection conn = fb.insert();
    ResultSet rs, rs1;
    String s = "";
    Statement st = conn.createStatement();
    PreparedStatement query = conn
            .prepareStatement("select sum(frequency) from tokendetails;");
    rs = query.executeQuery();
    rs.next();
    int count = rs.getInt(1);
    String sql = "select filename, sum(frequency) as freq from tokendetails group by filename;";
    rs1 = st.executeQuery(sql);
    while (rs1.next()) {
        String file = rs1.getString(1);
        File f = new File(file);
        String files = f.getName();
        double freq = ((rs1.getInt(2)) * 100 / count);
        s = s + "['" + files + "', " + freq + "]";
    }
    String str = "[" + s + "]";
    System.out.println(str);
%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>



<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var string="<%=str%>
    ";
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {
        'packages' : [ 'corechart' ]
    });
    google.setOnLoadCallback(drawChart);
    // Set a callback to run when the Google Visualization API is loaded.

    function drawChart() {

        alert(string);

        var data = google.visualization.arrayToDataTable();

        data.addColumn('string', 'File name');
        data.addColumn('number', 'percent');
        data.addRows(string);

        // Set chart options
        var options = {
            'title' : 'Chart View',
            'width' : 400,
            'height' : 300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document
                .getElementById('chart_div'));
        chart.draw(data, options);
        alert(str);
    }
</script>
</head>

<body>

    <div id="chart_div" style="width: 400; height: 300"></div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

好的,问题出在这一行:

var string="<%=str%>
    ";

它转换为:

var string="['file1', 1, 'file2', 2...]
    ";

这是错误的,因为它必须不是String类型,而是array类型。因此,您必须删除双键并将其转换为:

var arrayData=<%=str%>;
...
data.addRows(arrayData);