图表 Js + Angular

Question

我是不是漏掉了什么？两天来，我查看了这段代码以查看问题，只是为了开始。我正在测试 Chart Js 插件，我打算将 angular 与它一起使用。

似乎与我的代码存在某种冲突，导致脚本中的任何一个都没有运行。请帮忙

//Charts//
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var LineChart = new Chart(ctx).Line(data);

//Data//
data = {
  labels : ["January", "February", "March", "April", "May", "June", "July"],
  datasets : [{
    data:[65, 59, 80, 81, 56, 55, 40]
  }]
};

var app = angular.module('myApp',[]);
app.controller('MainController', function($scope){
  $scope.Title = 'My Charts';
});

http://plnkr.co/edit/RXzjPllg0RSWjvgMjIoU?p=preview

Answer 1

让您的图表适合您

http://plnkr.co/edit/YrI6RtQTkJkZde3Ynnhq?p=preview

    var app = angular.module('Chart', []);

    app.controller('MainController', ['$scope', function($scope) {

        $scope.greet = 'My Charts';

        data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                data: [65, 59, 80, 81, 56, 55, 40]
            }]
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        var LineChart = new Chart(ctx).Line(data);

    }]);

    //Data//

Answer 2

这是一个对我有用的例子。在你的 page.html...

    <!-- in head tag include: jquery.js jquery-ui.js bootstrap.js angular.js chart.js angular-chart.js angular-chart.css then this js -->

    <script type="text/javascript">
      var app = angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope, $http) {       
            // get example [{"January":10},{"February":20},{"March":50},{"April":30},{"May":20},{"June":10},{"July":10}]
        $http.get('http://mywebsite/myjsondata').
            success(function(data) {
                var labelArray = [];
                var dataArray = [];                
        angular.forEach(data, function(item){
          var jsObj = angular.fromJson(item);
          for (var prop in jsObj) {
              //alert(prop + " is " + jsObj[prop]);
              labelArray.push(prop);
          dataArray.push(parseInt(jsObj[prop]));
           }
        }); 

        //$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        // $scope.data = [[10, 20, 50, 30, 20, 10, 10]];
        $scope.labels = labelArray;                     
        $scope.data =   [dataArray]; 
                $scope.series = ['Send Totals']; // Series A
            })
            .error(function() {
        alert("Sorry. Unable to retrieve the data.");     
        }); 
    </script>

...在正文中放这个

    <div class="col-lg-6 col-sm-12 ng-scope" id="line-chart" ng-controller="LineCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Line Chart</div>
            <div class="panel-body">
        <canvas id="line" class="chart chart-line" chart-data="data"
         chart-labels="labels" chart-legend="true" chart-series="series"
         chart-click="onClick" >
        </canvas> 

        </div>
      </div>
    </div>

图表 Js + Angular

Chart Js + Angular

angularjs

chart.js