Question

我正在表没有列。×问题，我无法弄明白为什么......你能帮我理解什么是错的吗？

我的HTML：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.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: "<JSON URL>",
          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>

JAVA代码：

我使用的代码类似于示例中提供的代码

https://github.com/google/google-visualization-java/blob/master/examples/src/java/SimpleExampleServlet.java

MY JSON：

{
  "rows":[
    {
      "cells":[
        {
          "value":{"value":"A","objectToFormat":"A","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        },
        {
          "value":{"value":"1","objectToFormat":"1","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        }
      ],
      "customProperties":{}
    },
    {
      "cells":[
        {
          "value":{"value":"B","objectToFormat":"B","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        },
        {
          "value":{"value":"0","objectToFormat":"0","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        }
      ],
      "customProperties":{}
    }
  ],
  "customProperties":{},
  "warnings":[],
  "localeForUserMessages":null,
  "numberOfRows":2,
  "numberOfColumns":2,
  "columnDescriptions":[
    {"id":"Option","type":"TEXT","label":"Option","pattern":"","customProperties":{}},
    {"id":"Count","type":"TEXT","label":"Count","pattern":"","customProperties":{}}
  ]
}

Answer 1

如前所述，google.visualization.DataTable期望以与指定的格式不同的格式提供JSON数据。基本上有两种选择：

修改Java servlet以生成google.visualization.DataTable
转换生成的JSON数据

下面演示了如何将提供的JSON数据转换为与google.visualization.DataTable兼容（第二个选项）

＆＃13;

// 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: "<JSON URL>",
        dataType: "json",
        async: false
    }).responseText;*/

    var jsonData = {
        "rows": [
            {
                "cells": [
                    {
                        "value": { "value": "A", "objectToFormat": "A", "null": false, "type": "TEXT" },
                        "formattedValue": null,
                        "customProperties": {},
                        "null": false,
                        "type": "TEXT"
                    },
                    {
                        "value": { "value": "1", "objectToFormat": "1", "null": false, "type": "TEXT" },
                        "formattedValue": null,
                        "customProperties": {},
                        "null": false,
                        "type": "TEXT"
                    }
                ],
                "customProperties": {}
            },
            {
                "cells": [
                    {
                        "value": { "value": "B", "objectToFormat": "B", "null": false, "type": "TEXT" },
                        "formattedValue": null,
                        "customProperties": {},
                        "null": false,
                        "type": "TEXT"
                    },
                    {
                        "value": { "value": "0", "objectToFormat": "0", "null": false, "type": "TEXT" },
                        "formattedValue": null,
                        "customProperties": {},
                        "null": false,
                        "type": "TEXT"
                    }
                ],
                "customProperties": {}
            }
        ],
        "customProperties": {},
        "warnings": [],
        "localeForUserMessages": null,
        "numberOfRows": 2,
        "numberOfColumns": 2,
        "columnDescriptions": [
            { "id": "Option", "type": "TEXT", "label": "Option", "pattern": "", "customProperties": {} },
            { "id": "Count", "type": "TEXT", "label": "Count", "pattern": "", "customProperties": {} }
        ]
    };



    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(convertToDataTableJson(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 });
}



function convertToDataTableJson(json)
{
     var outJson = { cols: [], rows: []};  
     json.columnDescriptions.forEach(function(c){
         outJson.cols.push({ "id": c.id, "label": c.label, "pattern": c.pattern, "type": c.type == "TEXT" ? "string" : "number" }); 
     });

     json.rows.forEach(function(r){
         var cells = {c : []};
         r.cells.forEach(function(c){
             cells.c.push({ "v": c.value.value, "f": null });
         });   
         outJson.rows.push(cells);
     });
     return outJson;
}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="chart_div"></div>

＆＃13;

数据表：表没有列

1 个答案: