使用ChartJS创建图表栏

Creat Chart Bar using ChartJS

本文关键字：创建 ChartJS 使用      更新时间：2023-09-26

我在使用ChartJS时遇到问题。我想我没有正确地包含chartjs库。我在流这个http://jtblin.github.io/angular-chart.js/介绍

我的项目时间表：

-app.html

--app/

------app.config.js

------app.module.js

------app.rutes.js

------组件/

-----------------可视化View.html

-----------------可视化Ctrl.js

app.html：

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Angular Material style sheet -->
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">  
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
        <script src="app/app.module.js"></script>
        <script src="app/app.routes.js"></script>        
        <script src="app/app.config.js"></script>
        <!-- Controller-->   
        <script src="app/components/visulizations/VisulizationsCtrl.js"></script> 
        <!-- ChartJS-->
        <script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
        <script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"></script>
    </head>

app.module.js:

var app = angular.module('App', ['ngMaterial', 'ngRoute','chart.js']);

app.routes.js:

app.config(function ($routeProvider) {
    $routeProvider.when('/my_repos', {
        templateUrl: 'app/components/myRepos/myReposView.html',
        controller: 'MyReposCtrl'
    }).when('/visulizations', {
        templateUrl: 'app/components/visulizations/visulizationsView.html',
        controller: 'VisulizationsCtrl'
    }).otherwise({
        redirectTo: '/my_repos'
    });
});

可视化Ctrl.js:

app.controller('VisulizationsCtrl', function ($scope, GitHubService) {
  $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]
  ];
});

visuliizationsView.html：

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

控制台错误：

错误：[$injector:modulerr]http://errors.angularjs.org/1.5.5/$inject。。

在应用程序模块之前加载ChartJS库

    <script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
    <script src="cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.routes.js"></script>        
    <script src="app/app.config.js"></script>
    <!-- Controller-->   
    <script src="app/components/visulizations/VisulizationsCtrl.js"></script>

我认为您没有导入Chart.js。。。尝试模块化Add Chart.js

第一次添加<-Chart.js

下一行<-angular-chat.js

相关文章：