Javascript Google图表未在浏览器/JSON中显示_Javascript_Html_Json

Javascript Google图表未在浏览器/JSON中显示

javascript html json

Javascript Google图表未在浏览器/JSON中显示,javascript,html,json,Javascript,Html,Json,我正在尝试使用谷歌图表绘制一个时间序列，任何帮助都将不胜感激我正在尝试显示折线图我有一个正确下载到客户端浏览器的html文件，但没有显示任何内容。该文件名为gasdata.html 有一个对php文件的调用，该文件输出（通过echo）一些json文件供上述.html文件使用我的json中是否存在缺陷（它确实正确验证）我是否在html文件中错误地实现了Google图表html 这里没有多少活动部件，但我不知所措。非常感谢您的帮助 gasdata.html： <html> &

我正在尝试使用谷歌图表绘制一个时间序列，任何帮助都将不胜感激

我正在尝试显示折线图

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

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

我的json中是否存在缺陷（它确实正确验证）

我是否在html文件中错误地实现了Google图表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已损坏。JSON不允许包含诸如

Date

之类的对象，并且对象键必须用引号括起来（指定为字符串）

有关JSON中允许的内容的更多信息，请参阅。

谢谢您的帮助。这是我需要的，让它工作。如上所述，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>


load（'visualization'，'1'，{'packages'：['corechart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=$.ajax({
url:“getLinesData.php”，
数据类型：“json”，
异步：false
}).responseText；
var data=新的google.visualization.DataTable（jsonData）；
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（数据）；
}

我应该补充一点，上面的json是由getData.php输出的。再次感谢！谢谢你的回答，埃弗特。我想知道GoogleCharts实现是否比纯JSON更像JSON。此链接似乎表明并不总是需要引用。。。我在上面提到了JSON验证，我应该更具体一些。我已经用上面当前类似JSON的输出以及正确的引号包装验证过的JSON尝试了这一点。再次感谢。@TravisMillburn他们的文档没有提到JSON，因为它不是JSON，而是javascript！所以不能像这样使用jQuery加载javascript，因为jQuery只接受有效的JSON，应该会失败。JSON是javascript的一个子集。

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