角度チャートに凡例が定義されていない

Question

私はangular-chart.jsを使用してアプリケーションにグラフを描画しています。しかし、私は問題に直面しています。グラフの凡例にはラベルの代わりにが定義されていませんが表示されています。

マイJSコード：

 $scope.labels_std = ['Total Students', 'Submitted fee', 'Has to submit']; 
     $scope.options = {legend: {display: true, position: 'bottom'}}; 
     $scope.colors = ['#4D5360', '#949FB1', '#97BBCD']; 
     $scope.data_std = [ 
        $scope.allCount.students, 
        $scope.allCount.fees, 
        $scope.allCount.students - $scope.allCount.fees 
       ]; 

マークアップがです：

<canvas id="bar" class="chart chart-bar" chart-labels="labels_std" chart-data="data_std" chart-colors="colors" chart-options="options"></canvas> 

しかし結果はこれです：

Answer 1

データセットにlabelプロパティを定義していないため、undefinedが表示されています。

labelプロパティを各データセットの$scope.datasetOverrideモデル内に設定する必要があります。また、ビューのマークアップにディレクティブを追加します。

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var app = angular.module('app', ['chart.js']); 
 

 
app.controller("BarCtrl", function($scope) { 
 
    $scope.labels = ['Total Students', 'Submitted fee', 'Has to submit']; 
 
    $scope.colors = ['#4D5360', '#949FB1', '#97BBCD']; 
 
    $scope.std = 65, $scope.fee = 59, $scope.nfee = 80; 
 
    $scope.data = [ 
 
     [$scope.std, $scope.fee, $scope.nfee], 
 
     [$scope.std, $scope.fee, $scope.nfee], 
 
     [$scope.std, $scope.fee, $scope.nfee] 
 
    ]; 
 
    $scope.options = { 
 
     legend: { 
 
     display: true 
 
     } 
 
    } 
 
    $scope.datasetOverride = [{ 
 
     label: 'My First Dataset' 
 
    }, { 
 
     label: 'My Second Dataset' 
 
    }, { 
 
     label: 'My Third Dataset' 
 
    }]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
 
<div ng-app="app" ng-controller="BarCtrl"> 
 
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-colors="colors" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride"></canvas> 
 
</div>