个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 13:18:25 26 4
gpt4 key购买 nike

当我尝试使用 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;
}

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

最佳答案

您好，我遇到了同样的问题。请务必查看此处的安装说明 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>

在我解决这个问题之后，我得到的下一个错误是......

错误:请为图表元素设置高度和宽度

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

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

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

中提琴奏效了!希望这有帮助:)

关于javascript - AngularJS - Angularchart - 错误没有方法 'width'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22098040/

26 4 0
文章推荐： javascript - 如何处理 onChange 并将焦点更改为新的 ？
文章推荐： visual-studio - 在 tfs 中看不到联机选项
文章推荐： function - 通过字符串在PowerShell中调用函数
文章推荐： C# 如何根据您单击的内容显示或传递值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com