AngularJS圖表 - 顯示圖例

我使用這個庫，以圖表顯示在我的AngularJS應用程序，它工作正常：AngularJS圖表 - 顯示圖例

我沒能做到的唯一事情是展現傳奇。有誰知道該怎麼做？

2017-07-17 quma

檢查https://stackoverflow.com/questions/37107708/render-a-legend-on-角圖表-JS-環形圖表 – Vivz

使用期權legend: {display: true}

DEMO

angular.module("app", ["chart.js"]) 
 
    .controller("BarCtrl", function($scope) { 
 
    $scope.options = {legend: {display: true}}; 
 
    $scope.commonEstimationStats = { 
 
     rates: [{ 
 
     "direction": { 
 
      "id": 13, 
 
      "name": "health", 
 
      "type": 1 
 
     }, 
 
     "points": 5 
 
     }, { 
 
     "direction": { 
 
      "id": 14, 
 
      "name": "education", 
 
      "type": 1 
 
     }, 
 
     "points": 3 
 
     }] 
 
    }; 
 
    $scope.labels = []; 
 
    $scope.data = []; 
 
    angular.forEach($scope.commonEstimationStats.rates, function(key, value) { 
 
     $scope.labels.push(key.direction.name); 
 
     $scope.data.push(key.points); 
 
    }) 
 
    $scope.datasetOverride = [{ 
 
     fill: true, 
 
     backgroundColor: [ 
 
     "#66ff33", 
 
     "#36A2EB", 
 
     "#FFCE56" 
 
     ] 
 
    }, { 
 
     fill: true, 
 
     backgroundColor: [ 
 
     "#ffff00", 
 
     "#46BFBD", 
 
     "#FDB45C" 
 
     ] 
 
    }]; 
 
    });

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script> 
 
    <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-controller="BarCtrl"> 
 
    <canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-07-17 14:39:06 Sajeetharan

AngularJS圖表 - 顯示圖例

回答

相關問題