Angular-Chart.js 它不显示图表-前端问题

Angular-Chart.js it doesn#39;t display the chart(Angular-Chart.js 它不显示图表)

本文介绍了Angular-Chart.js 它不显示图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 Angular-chart.js它没有为我显示任何内容，这是我的 javascript 和 html 页面

I am trying to use Angular-chart.js it doesn't display anything for me here is my javascript and html page

(function(){
 angular.module("app", ["chart.js"]).controller("BarCtrl", 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]
    ];
 });
})();

<!DOCTYPE html>
<html>

<head>
    <script src="aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2FuZ3VsYXJqcy8xLjQuOC9hbmd1bGFyLm1pbi5qcw=="></script>
    <script src="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvQ2hhcnQuanMvMi4xLjIvQ2hhcnQubWluLmpzDQogICAg"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="YW5ndWxhci1jaGFydC5taW4uanMNCiAgICA="></script>
    <script src="YXBwLmpz"></script>
</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
    </div>

</body>

</html>

我不明白错误在哪里，提前感谢您的帮助

I don't understand where the error is, thanks in advance for your help

推荐答案

angular-chart.js 好像不支持 Chart.js 的第 2 版.下面是一个片段，显示了一个工作图表.它包括chart.js的v1.1.1

It looks like angular-chart.js doesn't support version 2 of Chart.js. Below is a snippet, that shows a working chart. It includes v1.1.1 of chart.js

angular.module("app", ["chart.js"]).controller("BarCtrl", 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]
  ];
});

<!DOCTYPE html>
<html>

<head>
  <script data-require="angularjs@1.5.3" data-semver="1.5.3" src="aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2FuZ3VsYXJqcy8xLjUuMy9hbmd1bGFyLm1pbi5qcw=="></script>
  <script src="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvQ2hhcnQuanMvMS4xLjEvQ2hhcnQubWluLmpz"></script>
  <script src="aHR0cDovL2p0Ymxpbi5naXRodWIuaW8vYW5ndWxhci1jaGFydC5qcy9kaXN0L2FuZ3VsYXItY2hhcnQuanM="></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="YXBwLmpz"></script>
</head>

<body ng-app="app">
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
  </div>
</body>

</html>

这篇关于Angular-Chart.js 它不显示图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！