谷歌图表未在浏览器/JSON中显示

Google Chart not displaying in browser / JSON

本文关键字：JSON 显示浏览器谷歌更新时间：2023-09-26

我正在尝试使用谷歌图表绘制时间序列图，如果有任何帮助，我们将不胜感激！

我正在尝试显示折线图。

我有一个html文件，它被正确下载到客户端浏览器，但没有显示任何内容。该文件名为gasdata.html

有一个对php文件的调用，该文件输出（通过echo）一些json文件供上述.html文件使用。

我的json中是否存在缺陷（它确实正确验证）？
我是否在我的html文件中不正确地实现了谷歌图表html？

这里的活动部件不多，但我不知所措。非常感谢您的帮助。

gasdata.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>

输出json:

{
  cols: [{label: 'Date', type: 'date'},
         {label: 'Production', type: 'number'}
  ],
  rows: [{c:[{v: new Date(2015, 3, 18)},
             {v: 76}
        ]},
         {c:[{v: new Date(2015, 3, 17)},
             {v: 75}
        ]},
         {c:[{v: new Date(2015, 3, 16)},
             {v: 74}
        ]},
         {c:[{v: new Date(2015, 3, 15)},
             {v: 73}
        ]},
         {c:[{v: new Date(2015, 3, 14)},
             {v: 72}
        ]}
    ]
}

谢谢，

您的JSON已损坏。JSON不允许有Date之类的对象，并且对象键必须用引号（指定为字符串）包装。

请参阅http://json.org/以了解有关JSON中允许的内容的更多信息。

感谢您的帮助。这是我让它发挥作用所需要的。正如Evert在上面指出的，JSON格式错误。我的html也有问题。

下面是一个好的JSON示例：

{"cols": [{"label":"Date","type":"string"},
         {"label":"Production","type":"number"}],
  "rows": [{"c":[{"v":"3/5/2015"},{"v": 76}]},
         {"c":[{"v":"3/4/2015"},{"v": 75}]},
         {"c":[{"v":"3/3/2015"},{"v": 74}]},
         {"c":[{"v":"3/2/2015"},{"v": 73}]},
         {"c":[{"v":"3/1/2015"},{"v": 72}]}]}

此外，这里有一些好的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">

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

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

        var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart"></div>
  </body>
</html>