график в представлении не отображается - Chart.js Angularjs - PullRequest
0 голосов
/ 29 августа 2018

График в представлении не отображается:

 <canvas class="chart chart-line" chart-data="data" chart-labels="labels"
            chart-series="series" chart-click="onClick"></canvas>

тест-controller.js:

    (function () {
        'use strict';

        angular
            .module('app.test')
            .controller('TestController', TestController);


        function TestController( $scope,  $timeout) {

            initialize();

            function initialize() {

                $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
                $scope.series = ['Series A', 'Series B'];
                $scope.data = [
                    [65, 59, 80, 81, 56, 55, 40],
                    [28, 48, 40, 19, 86, 27, 90]
                ];
                $scope.onClick = function (points, evt) {
                    console.log(points, evt);
                };

                // Simulate async data update
                $timeout(function () {
                    $scope.data = [
                        [28, 48, 40, 19, 86, 27, 90],
                        [65, 59, 80, 81, 56, 55, 40]
                    ];
                }, 3000);

            }

        }
    })();

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"> 
</script>

Я использую пример https://github.com/jtblin/angular-chart.js#example

Не знаю, почему график не отображается

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете использовать тот же способ, убедитесь, что angular-charts и chart.js должны иметь правильные версионные ссылки на библиотеки.

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

DEMO

(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: 'StackedBar',
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
        colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
        data : [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ]
    }
  }]);

})(window.angular);
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...