如何提取单独的JSON文件的数据以创建Google折线图？

Question

我有一个JSON文件：

[{"date": "2014-01-01","value": 190000000},{"date": "2014-01-02","value": 190379978},{"date": "2014-01-03","value": 90493749},{"date": "2014-01-04","value": 190785250}]

可以扩展。我想通过使用以下代码来提取JSON数据来创建Google线路图：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});      
  google.charts.setOnLoadCallback(line_chart);
function line_chart()
  {
        var jsonData = $.ajax({
        url: 'getdata.php',
        dataType:"json",
        async: false,
        success: function(jsonData)
         {
            var options =
            {
               legend: 'none',
               hAxis: { minValue: 0, maxValue: 30 },
               curveType: 'function',
               pointSize: 7,
               dataOpacity: 0.3
            };
            var data = new google.visualization.arrayToDataTable(jsonData);
            var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));
                     chart.draw(data, {width: 600, height: 400});                     
         }  
       }).responseText;      
  }
</script>

我的getData.php代码是：

<?php 
print test();
function test() {
    $jsonurl = 'data.json';
    $json = file_get_contents($jsonurl);
    echo $obj;
}
?>

在getData.php期间，所有JSON数据都倾倒在数组中。但是图表没有形成。如何创建线路图？我的代码有什么问题？请帮助。

Answer 1

使用arrayToDataTable

加载Google数据表时

数组必须是一个简单的数组，具有值，没有通用对象，例如

[["2014-01-01", 190000000], ["2014-01-02", 190379978], ...]

如果使用JSON，则必须处于Google的特定JSON格式

这也可以工作...

[[{v: "2014-01-01"}, {v: 190000000}], [{v: "2014-01-02"}, {v: 190379978}], ...]

---

因此，如果问题中的数据无法更改以匹配，
然后，需要一个简单的例程来转换Google的数据

请参见以下工作片段，数据在fail回调中进行了硬编码，
由于'getdata.php'从这里

不可用

google.charts.load('current', {
  callback: line_chart,
  packages: ['corechart']
});
function line_chart() {
  $.ajax({
    url: 'getdata.php',
    dataType: 'json'
  }).done(
    draw_chart
  ).fail(function (jqXHR, textStatus) {
    //console.log(textStatus);
    // for testing json data, remove when getdata.php is available
    draw_chart([{"date": "2014-01-01","value": 190000000},{"date": "2014-01-02","value": 190379978},{"date": "2014-01-03","value": 90493749},{"date": "2014-01-04","value": 190785250}]);
  });
  function draw_chart(jsonData) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'Value');
    $.each(jsonData, function (i, row) {
      data.addRow([
        row.date,
        row.value
      ]);
    });
    var options = {
      legend: 'none',
      hAxis: {
        minValue: 0,
        maxValue: 30
      },
      curveType: 'function',
      pointSize: 7,
      dataOpacity: 0.3,
      width: 600,
      height: 400
    };
    var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));
    chart.draw(data, options);
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="linechart_div"></div>