如何使用数据库数据在angularjs中创建图表?
我正在尝试创建一个条形图。我使用此条形图作为参考Here。 这是我的HTML部分..如何使用数据库数据在angularjs中创建图表?
<body ng-app="app">
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" width=100% height=25
chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</div>
这是我angularjs部分...
<script>
angular.module("app",["chart.js"]).controller("BarCtrl", function ($http,$scope) {
$http.get("../widget/stock_details.php").success(function(data){
$scope.data=data;
//$scope.tqnt=data.tqnt;
//$scope.old_quantity=data.old_quantity;
$scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug','Sep'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90];
});
});
如果我想在$ scope.data和$范围我的数据库中的数据。标签,然后我该怎么办?我会尝试这个 $scope.data = [ [data[0],data[2],data[4],data[6]] , [data[1],data[3],data[5]] ];
但这不是一个好方法,所以它可能是什么?
php文件是..
<?php
include('connection.php');
$er=new Connect();
$er->__construct();
$data=array();
$selct=mysql_query("SELECT * FROM stock");
while($row=mysql_fetch_array($selct))
{
$data[]=$row['total_qnt'];
$data[]=$row['old_quantity'];
$data[]=$row['stock_date];
}
echo json_encode($data);
?>
你需要做的是: -
变化while
部分象下面这样: -
$data[0][]=$row['total_qnt']; $data[1][]=$row['old_quantity'];
然后解析这个json encoded data
到array
写入您的javascript
代码并传递给$scope.data
。
很高兴帮助你:) :)欢呼声。 –
还有一件事,如果我想让我的$ scope.labels的价值也是一个动态的然后该怎么做。我已经编辑我的问题,你可以看看它。 –
您需要将所有东西(如标签和系列)添加到您的'$ data'数组中,然后将相应的子数组传递给标签,系列和数据。 –
'$ data [0] [] = $ row ['total_qnt']; $ data [1] [] = $ row ['old_quantity'];'然后解析它到你的javascript代码并传递给'$ scope.data'并检查 –
@Anant谢谢你的工作方式。 –
克里什很高兴帮助你 –