0
我想通過使用Google圖表API來繪製線條圖，並且我使用PHP codeignitor從mySQL數據庫檢索數據。如何從parseJSON數組中獲取每個數據
到目前爲止，我能夠檢索數據，但我無法解析Json數據，並將它們填充到折線圖中。下面是我實際加載的視圖。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
var BASE_URL = "<?php echo base_url(); ?>";
</script>
<script type="text/javascript">
// Load the Visualization API and the line package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: 'POST',
url: BASE_URL+'index.php/Chart_varnish/getdata',
dataType: "json",
success: function (data1) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable();
data.addColumn('string', 'timeline');
data.addColumn('string', 'solid');
var jsonData = $.parseJSON(data1);
for (var i = 0; i < jsonData.length; i++) {
data.addRows([jsonData[i].timeline, jsonData[i].solid_t1]);
}
var options = {
title: 'Solid chart',
width: 900,
height: 500,
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
});
}
</script>
</head>
<body>
<div id="line_chart"></div>
</body>
</html>
這下是在我的控制器功能的GetData：
function getdata(){
$this->load->model('Chart');
$this->load->helper('url');
$data = $this->Chart->getdata_solid();
print_r(json_encode($data, true));
}
我試圖輸出json_encode數據，我能得到下面的結果：
[{"timeline":"430","solid_t1":"12"},{"timeline":"030","solid_t1":"8.1"},{"timeline":"830","solid_t1":"32"},{"timeline":"1230","solid_t1":"10"},{"timeline":"1630","solid_t1":"100"},{"timeline":"2030","solid_t1":"8"}]
燦有人幫助我，謝謝。
更新
嗨，大家好，我把函數在我的模型這裏，也許是因爲我的查詢結果是數組，而不是一個對象？
function getdata_solid(){
$this->db->select('timeline');
$this->db->select('solid_t1');
$this->db->from("varnish_mvs");
$this->db->where('date_selected', '2017-03-25');
//$this->db->where('timeline', $timeline);
$query = $this->db->get();
return $query->result_array();
}
最後更新：我終於通過改變裝載谷歌圖表功能的方式解決了這個問題。這裏是我最後的工作代碼。我希望這可以幫助有同樣問題的人。
$(document).ready(function() {
$.ajax({
type: 'POST',
//url: 'http://localhost/charts/charts/getdata',
url: BASE_URL+'index.php/Chart_varnish/getdata',
dataType: "JSON",
success: function (data1) {
// alert(data1);
// Load the Visualization API and the line package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(function(){
drawChart(data1);
});
}
});
function drawChart(data1) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'timeline');
data.addColumn('number', 'solid_t1');
var dataArray = [];
/*$.each(data1, function(i, obj){
dataArray.push([obj.timeline, parseInt(obj.solid_t1)]);
});*/
var jsonData = $.parseJSON(data1);
for (var i = 0; i < jsonData.length; i++) {
dataArray.push([jsonData[i].timeline, parseInt(jsonData[i].solid_t1)]);
}
//dataArray.push([jsonData[0].timeline, parseInt(jsonData[0].solid_t1)], [jsonData[1].timeline, parseInt(jsonData[1].solid_t1)])
//dataArray.push(['2', 3], ['6', 5]);
alert(dataArray);
data.addRows(dataArray);
var options = {
title:'Solid chart',
width: 900,
height: 500,
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
});
嘗試後更換'的print_r（json_encode（$數據，真））;'到'回波（json_encode（$數據，真））;' –
'json_encode（混合$值[摘要$選項= 0 ]） - 第二個參數不應該是true/false – RamRaider
我試過'回聲'，也試過把'假'，它現在仍然顯示圖表 – Vito