如何使用数据库数据在angularjs中创建图表?

时间:2016-09-28 04:37:15

标签: php mysql angularjs charts

我正在尝试创建条形图。我使用此条形图作为参考Here。 这是我的HTML部分..

<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>

这是我的角色......

<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.labels中使用我的数据库数据那么我该怎么办?我试试这个 $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);
?>

1 个答案:

答案 0 :(得分:3)

您需要做的是: -

更改while部分,如下所示: -

$data[0][]=$row['total_qnt']; $data[1][]=$row['old_quantity'];

然后将此json encoded data解析为array到您的javascript代码并传递给$scope.data