[英]Using JSON in Chart.js with Angular.js
我遇到下一个问题->当我在前端使用由php echo标签打印的编码json字符串时,一切正常,但是当我想将其与angular get函数一起使用时,则无法正常工作。
Codeigniter控制器(后端)
public function getLogs(){
$this->load->model('Home_model');
$logs = $this->Home_model->getLogs();
echo json_encode($logs);
}
AngularJs控制器(前端)
$http.get('index.php/Welcome/getLogs')
.then(function (response) {
json = response.data;
});
var chartjsData = [];
for (var i = 0; i < json.length; i++) {
chartjsData.push(json[i].aantal);
}
var chartjsLabels = [];
for (var i = 0; i < json.length; i++) {
chartjsLabels.push(json[i].datum);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartjsLabels,
datasets: [{
label: "Aantal meldingen",
borderColor: 'rgb(255, 131, 48)',
data: chartjsData,
fill: false
}]
},
options: {
responsive: false
}
});
提前致谢!
由于$http.get()
方法是异步的,因此您需要在$http.get()
的回调函数中初始化图表,如下所示:
$http.get('index.php/Welcome/getLogs')
.then(function(response) {
json = response.data;
json = JSON.parse(json); //parse JSON string (if needed)
var chartjsData = [];
for (var i = 0; i < json.length; i++) {
chartjsData.push(json[i].aantal);
}
var chartjsLabels = [];
for (var i = 0; i < json.length; i++) {
chartjsLabels.push(json[i].datum);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartjsLabels,
datasets: [{
label: "Aantal meldingen",
borderColor: 'rgb(255, 131, 48)',
data: chartjsData,
fill: false
}]
},
options: {
responsive: false
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.