首页 文章

角度图表不显示

提问于
浏览 次
1

尝试使用带有从cdn链接获取的chart.js包的角度图表 . Angular是1.5.7，chart.js是2.1.6 . 我收到以下错误：

angular.js：13708 TypeError :(中间值）[type]不是createChart（angular-chart.js：197）的函数，位于angular-chart.js：150的Scope . $ digest（angular.js：17286）在Scope. $ apply（angular.js：17552）在bootstrapApply（angular.js：1754）的Object.invoke（angular.js：4709）atbootstrap（angular.js：1752）at bootstrap（angular.js：1772）在angularInit（angular.js：1657）处于angular.js：31468

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/angular/angular.js"></script>
        <script src="scripts/Chart.js"></script>
        <script src="scripts/angular/angular-chart.js"></script>

        <link rel="stylesheet" type="text/css" href="css/angular/angular-chart.css"/>

        <title>Practice</title>
    </head>

    <body ng-app="appName" ng-controller="indexController">

        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>

    </body>
    <script type="text/javascript" src="scripts/app.js"></script>
</html>

Javascript文件：

var appOne = angular.module('appName', ['chart.js']);


appOne.controller("indexController", function ($scope) {
   $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});

任何想法有什么问题以及如何解决？我也不明白这个错误 . 干杯:)

javascript html angularjs charts angular-chart

2 回答

  • 1

    我认为你缺少 chart-series 属性 .

    <canvas id="bar" class="chart chart-bar"
  chart-data="data" chart-labels="labels" chart-series="series"> 
</canvas
    回复于
  • 0

    所以问题是由于angular-chart.js和chart.js的版本彼此不兼容 .

    我最终使用了最新的angular-chart.js 1.0.0-alpha版本和chart.js 2.0 .

    这解决了这个问题！ :)

    回复于

相关问题