admin管理员组

文章数量:1384207

when I try to use Angular-chart, I have got this error :

TypeError: Object [object Object] has no method 'width'
at e (http://localhost:8080/lib/angular/angular-charts.min.js:1:10690)
at http://localhost:8080/lib/angular/angular.js:6680:44
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6271:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5678:15)
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6265:24)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5682:15)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at publicLinkFn (http://localhost:8080/lib/angular/angular.js:5587:30)
at http://localhost:8080/lib/angular/angular.js:1306:27 <div ac-chart="chartType" ac-data="data"     ac-config="config" id="chart" class="chart ng-isolate-scope">

Do you know how to fix this ? I haven't found anything helpful on internet.

Here is my code :

HTML

 <!doctype html>

<html lang="en" ng-app="MYaPP">
<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <link rel="stylesheet" href="css/app.css">
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="lib/angular/angular-charts.min.js"></script>
  <script src="js/app.js"></script>
  <script src="/socket.io/socket.io.js"></script>

</head>
<body>
<div class="top" align="center"> Risk Proxy Manager </div>

<br></br>



<div class="plotGraph" ng-controller='plotGraph'>
    <div ac-chart="chartType" ac-data="data" ac-config="config" id='chart' class='chart'></div>
</div>

</body>
</html>

App:

var myApp = angular.module('myApp', ['angularCharts']);

function plotGraph($scope){
console.log("And here is the graph part");

//Graph
$scope.data = {
    series: ['Sales', 'Ine', 'Expense', 'Laptops', 'Keyboards'],
    data : [{
        x : "Sales",
        y: [100,500, 0],
        tooltip:"this is tooltip"
    },
    {
        x : "Not Sales",
        y: [300, 100, 100]
    },
    {
        x : "Tax",
        y: [351]
    },
    {
        x : "Not Tax",
        y: [54, 0, 879]
    }]     
}

$scope.chartType = 'bar';

$scope.config = {
    labels: false,
    title : "Not Products",
    legend : {
        display:true,
        position:'left'
    }
}

$scope.config1 = {
    labels: false,
    title : "Products",
    legend : {
        display:true,
        position:'right'
    }
}
}

And the css :

.graph{
    float:left;
width: 50%;
height:400px;
}

/////////////////////////////////////////////////////////////////////////////////////////////////// Thank you

when I try to use Angular-chart, I have got this error :

TypeError: Object [object Object] has no method 'width'
at e (http://localhost:8080/lib/angular/angular-charts.min.js:1:10690)
at http://localhost:8080/lib/angular/angular.js:6680:44
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6271:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5678:15)
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6265:24)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5682:15)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at positeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at publicLinkFn (http://localhost:8080/lib/angular/angular.js:5587:30)
at http://localhost:8080/lib/angular/angular.js:1306:27 <div ac-chart="chartType" ac-data="data"     ac-config="config" id="chart" class="chart ng-isolate-scope">

Do you know how to fix this ? I haven't found anything helpful on internet.

Here is my code :

HTML

 <!doctype html>

<html lang="en" ng-app="MYaPP">
<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <link rel="stylesheet" href="css/app.css">
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="lib/angular/angular-charts.min.js"></script>
  <script src="js/app.js"></script>
  <script src="/socket.io/socket.io.js"></script>

</head>
<body>
<div class="top" align="center"> Risk Proxy Manager </div>

<br></br>



<div class="plotGraph" ng-controller='plotGraph'>
    <div ac-chart="chartType" ac-data="data" ac-config="config" id='chart' class='chart'></div>
</div>

</body>
</html>

App:

var myApp = angular.module('myApp', ['angularCharts']);

function plotGraph($scope){
console.log("And here is the graph part");

//Graph
$scope.data = {
    series: ['Sales', 'Ine', 'Expense', 'Laptops', 'Keyboards'],
    data : [{
        x : "Sales",
        y: [100,500, 0],
        tooltip:"this is tooltip"
    },
    {
        x : "Not Sales",
        y: [300, 100, 100]
    },
    {
        x : "Tax",
        y: [351]
    },
    {
        x : "Not Tax",
        y: [54, 0, 879]
    }]     
}

$scope.chartType = 'bar';

$scope.config = {
    labels: false,
    title : "Not Products",
    legend : {
        display:true,
        position:'left'
    }
}

$scope.config1 = {
    labels: false,
    title : "Products",
    legend : {
        display:true,
        position:'right'
    }
}
}

And the css :

.graph{
    float:left;
width: 50%;
height:400px;
}

/////////////////////////////////////////////////////////////////////////////////////////////////// Thank you

  • javascript
  • angularjs
Share Improve this question edited Feb 28, 2014 at 14:53 WellWellWell asked Feb 28, 2014 at 14:35 WellWellWellWellWellWell 1611 gold badge5 silver badges15 bronze badges 3
  • paste a plunkr example – pedrommuller Commented Feb 28, 2014 at 14:39
  • Can you show your code please? – qwertynl Commented Feb 28, 2014 at 14:46
  • Yes I have put it,sorry – WellWellWell Commented Feb 28, 2014 at 14:56
Add a ment  | 

2 Answers 2

Reset to default 9

Hello I had the same issue. Make sure you look at the installation instructions on here http://chinmaymk.github.io/angular-charts/ .

I solved it first by making sure my dependencies were loading in the correct order. This extension relies on d3 and Jquery.

This is the order it remends

<script type='text/javascript' href='./bower_ponents/jquery/jquery.min.js'></script> 
<script type='text/javascript' href='./bower_ponents/angular/angular.min.js'></script> 
<script type='text/javascript' href='./bower_ponents/d3/d3.min.js'></script> 
<script type='text/javascript' href='./bower_ponents/angular-charts/dist/angular-charts.min.js'></script>

After I fixed this the next error I got was...

Error: Please set height and width for the chart element

It turns out in order for the height and width of the graph to be set you have to set the height and width of the chart with CSS. I found this answer through this issue on the angular-charts repo. https://github./chinmaymk/angular-charts/issues/12

I added this code to my css...

#chart {
  height: 400px;
  width: 800px;
}

And viola it worked! Hopes this helps :)

The problem has been solved, very important set 

<script src="http://code.jquery./jquery-1.11.0.min.js"></script>

and 

<script data-require="[email protected]" src="http://code.angularjs/1.2.2/angular.js" data-semver="1.2.2"></script>

on the top!!!

本文标签： javascriptAngularJSAngularchartError has no method 39width39Stack Overflow

版权声明：本文标题：javascript - AngularJS - Angularchart - Error has no method &#39;width&#39; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744485570a2608427.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。