在angular-chart.js圆环图上渲染一个图例

Question

我已经关注了angular-chart.js文档，并创建了一个图表，但无法使用它渲染图例。我不明白为什么它不起作用。

文档：https://msdn.microsoft.com/en-us/library/system.runtime.interopservices.callingconvention(v=vs.110).aspx
类似的问题：http://jtblin.github.io/angular-chart.js/

<div class="panel-body" ng-controller="CircleCtrl" style="display: block;">
    <div class="chart-container" style="width:400px; height:200px;">
        <canvas id="doughnut"
            class="chart chart-doughnut"
            chart-data="data"
            chart-labels="labels"
            chart-colours="colours"
            chart-legend="true">
        </canvas> 
    </div>
</div>  

How to color legend in angular-chart.js

我还尝试在控制器中为图例定义一个数组，

$scope.legend = ["complete", "incomplete"]

根据其他SO问题中的接受答案，chart-legend="true"应足以使其有效。

有没有人有过这个库的经验，并且知道如何解决这个问题？

Answer 1

如果你使用的是基于chart.js 2的1.0.0-alpha分支，那么正确的语法是：

$scope.options = {legend: {display: true}};

并在你的HTML中

<canvas id="pie"
            class="chart chart-pie"                
            chart-data="data"
            chart-labels="labels"
            chart-options="options">
 </canvas>

Answer 2

我有类似的问题所以我扩展了圆形饼图的宽度和放置图表右侧的图表并且看起来很漂亮

您可以在Controller中添加它

fillna()

在HTML中，您可以添加

 $scope.options = {
    legend: {
      display: true,
      position: 'right'
    }
  };