2012-11-01 48 views
1

我正在嘗試加載會話數據以用於使用Google Chart API創建餅圖。但是,我似乎無法使其工作。 ?有人可以給我如何做一些指導下面是源代碼:

在AnalyzeUserClient.jsp:如何使用JavaScript爲Google Chart API加載會話數據

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load('visualization', '1', {packages: ['corechart']}); 
</script> 
<script type="text/javascript"> 
var sessionId = '<%= (HashMap<String, String>)request.getSession().getAttribute("hashMap") %>'; 

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     [sessionId], 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.PieChart(document.getElementById('visualization')). 
     draw(data, {title:"Percentage of Category for User:"}); 
    } 

    google.setOnLoadCallback(drawVisualization); 
</script> 

//HTML Code 
<div id="visualization" style="width: 600px; height: 400px;"></div> 

我在會議上的數據是這樣的:

{Environment=1, Education=1, Hospitality_Recreation=2, Disaster_Accident=1, Human Interest=3, Labor=1} 

回答

0

我剛剛完成了something similar向我的Android應用程序添加折線圖時。我已經修改了我的方案以適合您的情況;

var data = new google.visualization.DataTable(); 
// Slice-Value columns. 
data.addColumn('string', 'Area'); 
data.addColumn('number', 'Value'); 

// Get the injected dataset. 
var dataset = '<%= (HashMap<String, String>)request.getSession().getAttribute("hashMap") %>'; // 
var mapSize = dataset.length; 

for (var i = 0; i < mapSize; i++) {       // Iterate over key-value pairs 
    var keyValuePair = dataset[i];        // Get the i'th value. 
    var keyValueArray = new String(keyValuePair).split("=");  // Split on '=' 
    data.addRow([keyValueArray[0], parseInt(keyValueArray[1])]); // Add record. 
} 

爲了完整...

我測試過我的做法在Google Code Playground和它的作品。我添加了代碼;

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    // Slice-value columns. 
    data.addColumn('string', 'Area'); 
    data.addColumn('number', 'Value'); 

    var dataset = new Array("Environment=1", "Education=1", "Hospitality_Recreation=2", "Disaster_Accident=1", "Human Interest=3", "Labor=1"); 
    console.log(dataset); 
    var mapSize = dataset.length; 
    console.log(mapSize.toString()); 

    for (var i = 0; i < mapSize; i++) {       // Iterate over key-value pairs 
    var keyValuePair = dataset[i];        // Get the i'th value. 
    var keyValueArray = new String(keyValuePair).split("=");  // Split on '=' 
    data.addRow([keyValueArray[0], parseInt(keyValueArray[1])]); // Add record. 
    } 

    // Create and draw the visualization. 
    new google.visualization.PieChart(document.getElementById('visualization')). 
     draw(data, {title:"Area-Value plot for SO"}); 
} 
+0

只是將代碼複製並粘貼到我鏈接到的圖表遊樂場......它仍然有效。 – OceanLife