Question

我正在尝试使用Google Charts绘制时间序列图表，非常感谢任何帮助！

我正在尝试显示折线图。

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

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

我的json中是否存在缺陷（它确实正确验证了）？
我是否在html文件中不正确地实施了Google Charts 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}
        ]}
    ]
}

谢谢，

Answer 1

你的JSON坏了。 JSON不允许有Date之类的对象，并且对象键必须用引号括起来（指定为字符串）。

请参阅http://json.org/，详细了解JSON中允许的内容。

Answer 2

感谢您的帮助。这是我需要它来工作。正如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>

Google Chart未在浏览器/ JSON中显示

2 个答案: