2017-12-23 4 views
1

こんにちは私は角棒グラフを使用していますが、うまくいきましたが、ツールチップを表示できません。このシリーズはうまくいきません。私のコードが添付されています。私はツールチップを表示する必要があります。各棒にカーソル移動が年とデータを持っているとき、私はツールチップで表示する必要があり角棒グラフツールチップシリーズが機能しない

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

コードは、すべての問題を持っていますが、必ずYは行いません。 OUは正しいバージョンが参照されている、私はあなたがアンギュラchart.js

のための参照が欠落している参照

EDIT:chartOptionsを変更することで、ツールチップを変更するINORDERあなたは、簡単なハックを行う必要があり

チャートは罰金が、シリーズではないのwokring

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

+0

私のように表示する必要があります:2007年データ:80そのような@ sajeetharan – jose

+0

私の期待出力を得る? – jose

+0

回答が – Sajeetharan

関連する問題