嗨,我正在使用 Angular 条形图,它工作正常,但我无法显示工具提示,该系列在这里工作不正常,我附上了我的代码,我的期望是当光标移动到每个条形图时,我需要显示工具提示我需要在工具提示中显示年份和数据
html
<html ng-app="app">
<head>
<title>Welcome</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body ng-controller="ChartController">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series">
</canvas>
</body>
</html>
Controller
angular.module("app", ["chart.js"]).controller("ChartController", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Year', 'Data'];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
});
最佳答案
代码没有任何问题,但请确保您引用了正确的版本,我发现您缺少对 angular-chart.js 的引用
编辑:
您需要做一个简单的 hack,以便通过修改 chartOptions
vm.chartOptions = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var legend = new Array();
var item = "Year:"+ tooltipItem.xLabel + "Data:"+tooltipItem.yLabel ;
legend.push(item);
return legend;
}
}
}
关于javascript - Angular 条形图工具提示系列不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47950557/