Question

当我尝试使用Angular-chart时，我遇到了这个错误：

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 compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5678:15)
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6265:24)
at compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5682:15)
at compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at compositeLinkFn (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">

你知道如何解决这个问题吗？我在互联网上找不到任何有用的东西。

这是我的代码：

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>

应用：

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

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

//Graph
$scope.data = {
    series: ['Sales', 'Income', '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'
    }
}
}

和css：

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

/////////////////////////////////////////////// ////////////////////////////////////////////////// // 谢谢

Answer 1

你好我有同样的问题。请务必查看此处http://chinmaymk.github.io/angular-charts/上的安装说明。

我首先通过确保我的依赖项以正确的顺序加载来解决它。此扩展依赖于d3和Jquery。

这是它推荐的订单

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

我修好了之后，我得到的下一个错误是......

Error: Please set height and width for the chart element

事实证明，为了设置图形的高度和宽度，您必须使用CSS设置图表的高度和宽度。我在angular-charts repo上通过这个问题找到了这个答案。 https://github.com/chinmaymk/angular-charts/issues/12

我将此代码添加到我的CSS ...

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

中提琴有效！希望这有助于：）

Answer 2

问题已经解决，非常重要的一套

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

和

<script data-require="angular.js@1.2.2" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>

在顶部!!!

AngularJS - Angularchart - 错误没有方法'width'

2 个答案: