어떻게 josn_encode 데이터를 Google 막대 차트로 배열로 변환 할 수 있습니까?

Question

이 내 json_encoded 데이터

$encoded_data = json_encode($data); 

echo $encoded_data; 

[{"cols":"2017-09-02 11:01:55","rows":"1186.55"},{"cols":"2017-09-03 11:31:35","rows":"1311.45"},{"cols":"2017-09-06 15:22:38","rows":"90000.00"},{"cols":"2017-09-06 16:39:16","rows":"90000.00"},{"cols":"2017-09-06 16:40:09","rows":"630.00"},{"cols":"2017-09-06 17:25:26","rows":"1311.45"},{"cols":"2017-09-06 17:54:50","rows":"1311.45"},{"cols":"2017-09-07 09:28:57","rows":"1311.45"},{"cols":"2017-09-07 10:20:16","rows":"1575.00"},{"cols":"2017-09-07 10:22:28","rows":"1311.45"},{"cols":"2017-09-07 10:27:52","rows":"1311.45"},{"cols":"2017-09-07 10:34:00","rows":"1311.45"},{"cols":"2017-09-07 10:39:46","rows":"91575.00"},{"cols":"2017-09-07 10:40:48","rows":"91311.45"},{"cols":"2017-09-07 10:47:34","rows":"1575.00"},{"cols":"2017-09-07 10:50:53","rows":"1575.00"},{"cols":"2017-09-07 10:51:18","rows":"1575.00"}] 

<!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the corechart package. 
     google.charts.load('visualization', '1', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 

     var jsonData = <?php echo $encoded_data; ?> 

     var data = new google.visualization.DataTable(jsonData); 




     // Set chart options 
     var options = {'title':'sales chart', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 



    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 

그것은 나에게 테이블에 열이없는 오류를 제공

입니다.

Answer 1

json으로 직접,
는 자바 스크립트 리터럴 객체 described here의 구조를 볼 수있는 데이터 테이블을 만들 수있는 올바른 형식이 아닌 ...

당신은 그것을 형식을 변경하지 않으려면 자바 스크립트를 사용하여 변환 할 수

... 작업 조각을 다음을 참조

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var jsonData = [{"cols":"2017-09-02 11:01:55","rows":"1186.55"},{"cols":"2017-09-03 11:31:35","rows":"1311.45"},{"cols":"2017-09-06 15:22:38","rows":"90000.00"},{"cols":"2017-09-06 16:39:16","rows":"90000.00"},{"cols":"2017-09-06 16:40:09","rows":"630.00"},{"cols":"2017-09-06 17:25:26","rows":"1311.45"},{"cols":"2017-09-06 17:54:50","rows":"1311.45"},{"cols":"2017-09-07 09:28:57","rows":"1311.45"},{"cols":"2017-09-07 10:20:16","rows":"1575.00"},{"cols":"2017-09-07 10:22:28","rows":"1311.45"},{"cols":"2017-09-07 10:27:52","rows":"1311.45"},{"cols":"2017-09-07 10:34:00","rows":"1311.45"},{"cols":"2017-09-07 10:39:46","rows":"91575.00"},{"cols":"2017-09-07 10:40:48","rows":"91311.45"},{"cols":"2017-09-07 10:47:34","rows":"1575.00"},{"cols":"2017-09-07 10:50:53","rows":"1575.00"},{"cols":"2017-09-07 10:51:18","rows":"1575.00"}]; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'x'); 
 
    data.addColumn('number', 'y'); 
 

 
    jsonData.forEach(function (row) { 
 
    data.addRow([ 
 
     row.cols, 
 
     parseFloat(row.rows) 
 
    ]); 
 
    }); 
 

 
    var options = { 
 
    title: 'sales chart', 
 
    width: 400, 
 
    height: 300, 
 
    chartArea: { 
 
     left: 140 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>