Google Charts通過Javascript解析JSON

Question

我正在嘗試使用Google Charts並使用我通過json_encode（）在PHP中創建的外部JSON文件填充它。

所以我讓谷歌圖表工作，從示例靜態靜態數據：

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]
    ]);

因此，據我所知，基本上應該用JSON文件中的條目替換var數據，該文件的格式如下：

[{"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創建一個Google數據表，
json必須采用特定格式，請參閱...
構造函數的JavaScript文字數據參數的格式

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將等待頁面加載，
不需要-> $(document).ready或類似的功能

Google載入后，創建圖表和數據表，
這些只需要創建一次

然后使用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

我是Aready創建的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與newData一起使用，在文檔中查找有關此內容的更多信息，希望對您有所幫助