Javascript 带路线的角JS图_Javascript_Angularjs

Javascript 带路线的角JS图

javascript angularjs

Javascript 带路线的角JS图,javascript,angularjs,Javascript,Angularjs,我是angular js的新手，我想通过以下代码用angular js制作图表，但图表不会出现在页面中，只是打印消息这是script.js // create the module and name it scotchApp var scotchApp = angular.module('scotchApp', ['ngRoute']); // configure our routes scotchApp.config(function($routeProvider) { $rout

我是angular js的新手，我想通过以下代码用angular 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>


角度图
{{message}}

有人能帮我吗？

可能是因为缺少模块依赖项，所以无法正常工作<代码>角度模块（'scotchApp'，['angularCharts'，'ngRoute]）它得到以下错误未捕获错误：[$injector:modulerr]…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangularjs.min.js%3A18%3A170）我解决了这个问题，现在这个消息出现了引用错误：d3没有定义，它也放了d3.jsI希望你现在可以使用它。无论如何，这里有一个你的代码的工作演示。我在github repo上遇到了麻烦，因为主repo当前无法工作（缺少模板）。所以我必须得到0.2.6的角度图标签。