使用Google Chart的餅圖

Question

我正在嘗試運行此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>

Answer 1

好的，您的問題出在這一行：

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

它被轉換為類似：

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

這是錯誤的，因為它一定不是String類型，而是array類型。 因此，您必須刪除雙倍余量並將其變為：

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

使用Google Chart的餅圖

問題描述

1 個解決方案

解決方案1
0 2014-09-12 07:19:11

使用Google Chart的餅圖

問題描述

1 個解決方案

解決方案1 0 2014-09-12 07:19:11

解決方案1
0 2014-09-12 07:19:11