角度图表不显示

Angular Charts not display

本文关键字：显示      更新时间：2023-09-26

尝试使用带有图表的角度图表.js从CDN链接中获取的捆绑包。角度是 1.5.7，图表.js是 2.1.6。我收到以下错误：

角度.js：13708 类型错误：（中间值）[类型] 不是函数 at createChart （angular-chart.js：197） 在角度图.js：150 在范围.$digest （角度.js：17286） 在范围.$apply （角度.js：17552） at bootstrapApply （Angular.js：1754） at Object.invoke （angular.js：4709） at doBootstrap （angular.js：1752） 在引导（角度.js：1772） at angularInit （angular.js：1657） 角度.js：31468

网页代码：

         <!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]
  ];
});

任何想法是错误的以及如何解决它？我也不明白这个错误。干杯:)

我认为您缺少chart-series属性。

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

所以问题是由于角度图的版本.js和图表.js彼此不兼容。

我最终使用了最新的角度图.js带有图表的 1.0.0-alpha 版本.js 2.0。

这解决了问题！ :)

相关文章：