gpt4 book ai didi

javascript - Angular 图表未渲染

转载 作者:行者123 更新时间:2023-12-03 08:38:12 24 4
gpt4 key购买 nike

你好,我试图从 Angular-Charts 网站渲染一个简单的示例,但我什至无法渲染它。我假设是因为我的 Angular 指令未加载或其他原因。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/dist/angular-chart.css"/>
<link rel="stylesheet" href="css/angular.css"/>
</head>
<body>

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick" >
</canvas>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="js/dist/angular-chart.js"></script>
<script src="js/chart.js"></script>
</body>
</html>

chart.js

angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});

最佳答案

我认为你只需要将你的 Angular 与项目联系起来。

<body ng-app="app" ng-controller="LineCtrl">
...
</body>

关于javascript - Angular 图表未渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33132958/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com