json 到 javascript - 谷歌圖表

Question

過去，我使用以下方法適當地解析 json 數據，以便我可以填充一個選擇框：

var request = null;

request = $.ajax({
  type: "POST",
  url: "url goes here",
  dataType: 'text',
  success: function(returned) {
    returned = JSON.parse(returned)

    $.each(returned, function(selectid, item) {
      var sel = $("#" + selectid).get(0);
      sel.options.length = 0;

      $.each(item, function(i, subitem) {
        sel.options[i] = new Option(subitem.text, subitem.value);
      });
    });
    request = null;
  }
});

如何將相同的技術應用於下面的代碼，但沒有選擇框，只需將 json 解析為 drawChart 函數？

$.ajax({
  url: 'chart_json.aspx',
  type: 'POST',
  dataType: 'text',
  success: function(data) {
    drawChart(data);
  }
});

Answer 1

我認為您的問題在於您的 ajax 響應，我會執行以下操作：

在您的回復中：

{ 
  graphData : [
    ['user1',{v:0.00, f:'0.00'}],
    ['user2',{v:0.00, f:'0.00'}],
    ['user3',{v:0.00, f:'0.00'}],
    ['user4',{v:0.00, f:'0.00'}],
    ['user5',{v:0.00, f:'0.00'}]
  ],
  status : "ok"
}

在你的js中：

$.ajax({
  url: 'get_json.aspx',
  type: 'POST',
  dataType: 'json',//this is important
  success: function(data) {
    //this is not vital, but it's nice to check the response
    if(typeof data === "object" && data.status === "ok"){
        graphData = data.graphData;
        drawVisualization(graphData);
    }
  }
});

希望這有幫助，思南。

Answer 2

$.ajax({
  url: 'get_json.aspx',
  type: 'POST',
  dataType: 'json', // as noted by Sinan
  success: function(data) {
    drawVisualization(data);
  }
});

function drawVisualization(serverData) {
    var chartData = [];
    for(var i = 0; i < serverData.length; i++) {
      chartData.push([serverData[i][0], serverData[i][1].v]);
    }
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'WIP');
    data.addColumn('number', 'Percentage');
    data.addRows(chartData);
    new google.visualization.PieChart(document.getElementById('visualization')).draw(data, {width: 400, height: 240, is3D:true});     
}

chartData 數組需要有 2 列（因為您在 google.visualization.DataTable 上兩次調用 addColumn），每行有一個字符串和一個數字。

示例在這里