Question

我正在尝试使用Google Charts并使用外部JSON文件填充它，我通过json_encode（）在PHP中创建。

所以我得到谷歌图表工作，使用示例中的静态随机数据，这是：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Time', 'Temperature', 'Humidty'],
      ['2018-03-09 13:28:49',  1000,      400],
      ['2018-03-09 13:28:59',  1170,      460],
      ['2018-03-09 14:28:49',  660,       1120],
      ['2018-03-09 17:28:49',  1030,      540],
      ['2018-03-09 13:28:49',  1030,      540]
    ]);

基本上我理解var数据应该替换为我的JSON文件中的条目，该文件的格式如下：

[{"id":"1","temp":"24.40","hum":"28.30","insert_date":"2018-03-09 13:28:49"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:29:59"}]

所以我需要的数据是临时，哼声和插入日期。所以，问题是如何解析它？

我已经尝试了好几个小时，但却无法弄明白。

由于

Answer 1

在您的页面底部只是将数据初始化为javascript变量并在图表函数中使用它，但请注意它应该包含drawChart（）或具有此功能的文件。示例如下：

<script>
var php_data = "<?=$json_data?>";
function drawChart() {
    var data = google.visualization.arrayToDataTable(php_data);
</script>

另一个解决方案是将数据作为变量传递给drawchart函数，如下所示：

<script>
var php_data = "<?=$json_data?>";
function drawChart(php_data) {
    var data = google.visualization.arrayToDataTable(php_data);
</script>

Answer 2

建议使用ajax从php获取数据

直接从json创建谷歌数据表，
json必须采用特定格式，参见...
Format of the Constructor's JavaScript Literal data Parameter

google.visualization.arrayToDataTable不适用于您发布的json示例但是，您可以逐行手动解析json ...

$.each(jsonData, function (index, row) {
  data.addRow([
    new Date(row.insert_date),
    parseFloat(row.temp),
    parseFloat(row.hum)
  ]);
});

建议使用以下设置...

google.charts.load将等待页面加载，
不需要 - ＆gt; $(document).ready - 或类似的功能

一旦谷歌加载，创建图表和数据表，
这些只需要创建一次

然后使用ajax获取数据，并绘制图表

如果要继续向同一图表添加更多数据，请执行以下操作：等待图表的'ready'事件，然后获取更多数据

请参阅以下工作片段，
例如，您提供的示例数据用于ajax fail回调，
可以删除...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create chart
  var container = $('#chart_div').get(0);
  var chart = new google.visualization.LineChart(container);
  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 60,
      left: 60,
      right: 60,
      bottom: 60
    },
    hAxis: {
      format: 'M/d HH:mm:ss',
      title: 'Time'
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'x');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  // after the chart draws, wait 60 seconds, get more data
  google.visualization.events.addListener(chart, 'ready', function () {
    window.setTimeout(getData, 60000);
  });

  getData();
  function getData() {
    $.ajax({
      url: 'data.php',
      dataType: 'json'
    }).done(function (jsonData) {
      loadData(jsonData);
    }).fail(function (jqXHR, textStatus, errorThrown) {
      var jsonData = [{"id":"1","temp":"24.40","hum":"28.30","insert_date":"2018-03-09 13:28:49"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:29:59"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:31:10"}];
      loadData(jsonData);
    });
  }

  function loadData(jsonData) {
    // load json data
    $.each(jsonData, function (index, row) {
      data.addRow([
        new Date(row.insert_date),
        parseFloat(row.temp),
        parseFloat(row.hum)
      ]);
    });
    drawChart();
  }

  $(window).resize(drawChart);
  function drawChart() {
    // draw chart
    chart.draw(data, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

Answer 3

我正在创建我的json文件，所以我像这样阅读frm ajax

function setSensor(sensor)
{
    $.ajax({
        url:"QueryPHPFile.php",
        method:'POST',
        data: {varData: data},
        beforeSend: function(){}
    }).done(function(res){
        res = JSON.parse(res);
        google.charts.load('current', {packages: ['corechart', 'line']});
        google.charts.setOnLoadCallback(function() {muestra2(res); });  

    }).fail(function(){
    }).always(function(){});
}

然后我有像这样的函数muestra2，其中res也是我的json文件

function muestra2(res)
    {
        // console.log(res);
        var data = null;
        data = new google.visualization.DataTable();
        data.addColumn('date', 'hAxis');
        data.addColumn('number', 'vAxis');
        var total = [];
        var ValueFloat;
        for (var i = res.length - 1; i >= 0; i--) {
            ValueFloat = parseFloat(res[i] ['NameLabelInYourJsonFile']); 
            var date2= res[i]['Fecha'];
            var esplit = date2.split("-",3);  //Format to date separated
            total.push([ new Date (esplit[0] , esplit[1] -1, esplit[2]),lecturaConvertida]); // new Date( , , )
        }

        data.addRows(total);

        var options = {
            hAxis: {
                title: 'hAxis Name',
                format: 'd MMM' 
                },
            vAxis: {
                title: 'vAxis Name'
                },
                backgroundColor: '#ffffff', //fondo de la grafica
                width: 700,
                lineWidth: 1, 
                height: 400,
                title: 'Name Graphic',

            };
        var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
        chart.draw(data, options);
        }

使用res.lenght，我们知道hoy记录在Json文件中。对于日期，您必须使用insert with newData，在文档中查找更多相关内容，我希望这可以帮助您

Google Charts通过Javascript解析JSON

3 个答案: