角条形图工具提示系列不起作用

时间：2017-12-23 07:09:31

标签： javascript angularjs charts

嗨，我正在使用角度条形图它工作正常，但我无法显示工具提示系列不正常在这里我附加我的代码我的期望是我需要显示工具提示当光标移动到每个都有吧我需要在工具提示中显示年份和数据

的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];
});

1 个答案:

答案 0 :(得分：1)

代码没有任何问题，但请确保您提供了正确的版本，我发现您缺少angular-chart.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

相关问题
最新问题