javascript - Angular 条形图工具提示系列不起作用

标签 javascript angularjs charts

嗨,我正在使用 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;
            }
          }
        }

DEMO

关于javascript - Angular 条形图工具提示系列不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47950557/

相关文章:

javascript - 如何同步2个iframe的滚动条

javascript - 如何使用 Angular JS 为碳设计系统模式添加条件?

javascript - 即使过滤器工作, Angular 过滤器也会抛出 "Can' t interpolate"错误

ios - 如何更改 xAxis 标签 iOS 图表 (Swift 2.3)

charts - ng2-图表 : Error during evaluation of "mousemove"

JavaScript 在控制台中有效,但在我的页面上无效

javascript - 当前浏览器的净宽和净高

javascript - JavaScript 单位转换器

javascript - 如何通过单击另一个图表的元素来打开 Kibana 图表

javascript - 新的 Chart.js 图表 onclick