Angular Bar图表工具提示系列不起作用



嗨,我正在使用Angular bar图表它工作正常,但我无法显示工具提示该系列不正常当光标在每一年和数据中移动到酒吧时,我需要在工具提示中显示

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>

控制器

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.js

的参考。

编辑:

您需要通过修改 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

最新更新