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