Question

我是角度js的新手，我想通过以下代码制作带角度js的图表，但图表没有显示在页面中它只是打印消息

这是script.js

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'hello.html',
            controller  : 'mainController'
        })
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'some text';

    $scope.config = {
            title: 'Products',
            tooltips: true,
            labels: false,
            mouseover: function() {},
            mouseout: function() {},
            click: function() {},
            legend: {
              display: true,
              //could be 'left, right'
              position: 'right'
            }
          };

          $scope.data = {
            series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
            data: [{
              x: "Laptops",
              y: [100, 500, 0],
              tooltip: "this is tooltip"
            }, {
              x: "Desktops",
              y: [300, 100, 100]
            }, {
              x: "Mobiles",
              y: [351]
            }, {
              x: "Tablets",
              y: [54, 0, 879]
            }]
          };
});

这是你好的页面

<!DOCTYPE html>
<html ng-app="scotchApp">

<head>
<meta charset="utf-8" />
<title>Angular-charts</title>
 <link rel="stylesheet" href="bootstrap.css" />
 <script src="angular.js"></script>
 <script src="d3.js"></script>
  <script src="angular-charts.min.js"></script>
 <script src="script.js"></script>
 </head>

 <body ng-controller="mainController">
 <p>{{ message }}</p>
 <div 
 data-ac-chart="'bar'" 
 data-ac-data="data" 
 data-ac-config="config" 
 class="chart">
</div>
</body>
 </html>

任何人都可以帮助我吗？

带路线的Angular JS图表

0 个答案: