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 に答える