1

我正在尝试加载用于使用 Google Chart API 创建饼图的会话数据。但是我似乎无法使其工作。有人可以给我一些指导吗？下面是源代码：

在 AnalyzeUserClient.jsp 中：

<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}
4

1 回答 1

0

在向我的 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"});
}
于 2012-12-06T09:59:53.580 回答