2014-02-28 67 views
2

,當我嘗試使用Angularchart,我得到這個錯誤:AngularJS - Angularchart - 錯誤有沒有方法「寬度」

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; 
} 

///////// ////////////////////////////////////////////////// ///////// /////////////////////////////// 謝謝

+0

給一個變量粘貼plunkr例如 –

+0

你能告訴你的代碼嗎? – qwertynl

+0

是的,我已經把它,對不起 – WellWellWell

回答

9

你好,我有同樣的問題。確保你看看這裏的安裝說明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設置圖表的高度和寬度。我在角度圖表回購中發現了這個問題。 https://github.com/chinmaymk/angular-charts/issues/12

我將此代碼添加到我的CSS ...

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

和中提琴它的工作!希望這有助於:)

+0

完美,謝謝! – WellWellWell

0

的問題已經解決,非常重要的一套

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

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

在頂部!

0

有其實你可以在配置

$scope.config{ 
    //other config variables here 

    waitForHeightAndWidth: false // if true, it will not throw an error when the height or width are not defined (e.g. while creating a modal form), and it will be keep watching for valid height and width values 
}; 

這個來自角圖表文檔https://github.com/chinmaymk/angular-charts/

相關問題