谷歌圖表顯示空白使用JSON

我一直試圖讓一些谷歌圖表工作從本地數據庫的一些數據。我想我現在已經正確地出現了JSON。谷歌圖表顯示空白使用JSON

{ 
    "cols": [ 
     { 
      "id": "", 
      "label": "Inits", 
      "pattern": "", 
      "type": "string" 
     }, 
     { 
      "id": "", 
      "label": "SalesVal", 
      "pattern": "", 
      "type": "number" 
     } 
    ], 
    "rows": [ 
     { 
      "c": [ 
       { 
        "v": "IS", 
        "f": null 
       }, 
       { 
        "v": "1708.6000", 
        "f": null 
       } 
      ] 
     }, 
     { 
      "c": [ 
       { 
        "v": "NS", 
        "f": null 
       }, 
       { 
        "v": "1098.8200", 
        "f": null 
       } 
      ] 
     }, 
     { 
      "c": [ 
       { 
        "v": "RC", 
        "f": null 
       }, 
       { 
        "v": "458.8200", 
        "f": null 
       } 
      ] 
     } 
    ] 
}

而我正在使用它作爲HTML。

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.php", 
      dataType:"json", 
      async: false 
      }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 400, height: 240}); 
    } 

    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    </body> 
</html>

我已經過了幾次，不能看到我出錯的地方。

來源

2015-05-29 user3572565

它發生自SalesVal列是number類型，但單元格包含字符串值。

根據Format of the Constructor's JavaScript Literal data Parameter：

type [Required]該列中的數據的數據類型。支持下列字符串值（實例包括v：屬性，描述更高版本）：

'編號' - JavaScript的數值。示例值：v:7 , v:3.14, v:-55

說了這麼多，你可以考慮以下選項：

選項1.修改getData.php端點返回有效 JSON數據google.visualization.DataTable：

"v": "1708.6000" //invalid (current) 
"v": 1708.6000 //valid

選項2

確保數據列的number type包含JavaScript數值，如下面所示：

例

var jsonData = { 
 
    "cols": [ 
 
     { 
 
      "id": "", 
 
      "label": "Inits", 
 
      "pattern": "", 
 
      "type": "string" 
 
     }, 
 
     { 
 
      "id": "", 
 
      "label": "SalesVal", 
 
      "pattern": "", 
 
      "type": "number" 
 
     } 
 
    ], 
 
    "rows": [ 
 
     { 
 
      "c": [ 
 
       { 
 
        "v": "IS", 
 
        "f": null 
 
       }, 
 
       { 
 
        "v": "1708.6000", 
 
        "f": null 
 
       } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
       { 
 
        "v": "NS", 
 
        "f": null 
 
       }, 
 
       { 
 
        "v": "1098.8200", 
 
        "f": null 
 
       } 
 
      ] 
 
     }, 
 
     { 
 
      "c": [ 
 
       { 
 
        "v": "RC", 
 
        "f": null 
 
       }, 
 
       { 
 
        "v": "458.8200", 
 
        "f": null 
 
       } 
 
      ] 
 
     } 
 
    ] 
 
}; 
 

 

 
google.load('visualization', '1', { 'packages': ['corechart'] }); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(prepareJsonData(jsonData)); 
 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { width: 400, height: 240 }); 
 
} 
 

 
function prepareJsonData(json) { 
 
    json.rows.forEach(function(row) { 
 
     row.c[1].v = parseFloat(row.c[1].v); //ensure number cell value 
 
    }); 
 
    return json; 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>

來源

2015-05-31 11:33:09

真棒。得到它返回一個數字，而不是字符串，它直線上升。非常感謝解釋。 – user3572565

太棒了，很高興這幫了你:) –

谷歌圖表顯示空白使用JSON

回答

相關問題