gpt4 book ai didi

javascript - 工厂初始化期间的 Angular 图错误

转载 作者:行者123 更新时间:2023-12-03 05:55:25 25 4
gpt4 key购买 nike

我确定我错过了一些东西,因为我无法正确初始化 Angular 图。 Angular-chart.js v.1.0.3 第 30 行的全局 tooltips.mode 值初始化期间,工厂方法出错。查看代码,似乎此错误是合适的,因为此时工具提示值是 undefined

Chart.defaults.global.tooltips.mode = 'label';

但是,似乎有很多成功的人,所以我确信是我。这是我的基本设置。

index.html

<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="/lib/angular.min.js"></script>
<script src="/lib/Chart.js"></script>
<script src="/lib/angular-chart.js"></script>
<script src="/app/main.js"></script>
</head>

<body ng-controller="RootCtrl">
<!-- this is where content will be injected -->
<div>
<canvas id="averageDistance" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
</div>
</body>
</html>

** main.js **

'use strict';

//create main module
angular.module('App', ['chart.js'])
.controller('RootCtrl', ['$scope',
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);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
}]);

上述配置/$scope属性取自http://jtblin.github.io/angular-chart.js/

该页面甚至无法加载,因为 Angular 应用程序在尝试创建 Chart.js 模块时出现注入(inject)器错误。我正在使用 AngularJS v1.5.8、Chart.js v2.1.6 和 angular-chart.js v1.0.3。我在这里缺少什么?

最佳答案

确保您已引用这 3 个库

(i)angular.js

(ii)Chart.js

(iii)angular-chart.js

    https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js 
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.0-alpha8/angular-chart.js

这是工作 DEMO

关于javascript - 工厂初始化期间的 Angular 图错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39950028/

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