Question

我是AngularJs的菜鸟，之前从未使用过图表JS，并且由于没有显示图表而遇到了这个问题。我将不胜感激。谢谢！

<h1 class="text-center">Histogram</h1>

<canvas id="myChart" width="300" height="300"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<a ng-click = "vm.edit">Show</a>

angular
.module('histogram-test')
.controller("histoCnt", function ($state, $scope, $rootScope) {
    console.log("Contrller working");
    var vm = this;
    vm.edit = edit;
    $scope.chart = angular.element(document.getElementById("myChart"));

    function edit() {
        var myChart = new Chart($scope.chart, {
            type: 'bar',
            data: {
                labels: ["M", "T", "W", "R", "F", "S", "S"],
                datasets: [{
                    label: 'apples',
                    data: [12, 19, 3, 17, 28, 24, 7]
                        }, {
                    label: 'oranges',
                    data: [30, 29, 5, 5, 20, 3, 10]
                        }]
            }
        });
    };
});

Answer 1

您可以使用角度图表库。确保注入 'chart.js'

angular.module('myApp', ['chart.js'])

<强>样本

＆＃13;

(function(angular) {
  'use strict';
  angular.module('myApp', ['chart.js'])
  .controller('myController', [function() {
    var ctrl = this;

    ctrl.socialChart = {
      options: {
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      },
      type: 'bar',
      labels: ["M", "T", "W", "R", "F", "S", "S"],
      series: ['apples', 'oranges'],
      colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
       data: [
       [12, 19, 3, 17, 28, 24, 7],
       [30, 29, 5, 5, 20, 3, 10]
      ]
    }
  }]);
})(window.angular);

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multi Slot Transclude</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>    <script src="app.js"></script>
  </head>
  <body ng-app="myApp" ng-controller="myController as ctrl">
    <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"></canvas>      
  </body>

</html>

＆＃13;

图表Js和Angular JS无法正常工作，图表未显示

1 个答案: