Оформить легенду на диаграмме понтов angular -chart.js

Я следил за документацией angular -chart.js и создавал диаграмму, но не смог воспроизвести с ней легенду. Я не понимаю, почему он не работает.

Документация: http://jtblin.github.io/angular-chart.js/
Аналогичный вопрос SO: Как пометить легенду в 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>

Я также попытался определить массив для легенды в контроллере,

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

В соответствии с принятым ответом в другом вопросе SO, chart-legend="true" должно быть достаточно, чтобы заставить его работать.

У кого-нибудь есть опыт работы с этой библиотекой и есть идея, как решить эту проблему?

Ответ 1

Если вы используете ветвь 1.0.0-alpha на основе chart.js 2, правильный синтаксис:

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

и в вашем html

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

Ответ 2

У меня была аналогичная проблема. Поэтому я расширил ширину круговой диаграммы и размещенных легенд в правой части графика и выглядел довольно хорошо.

Вы можете добавить это в контроллер

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

В HTML вы можете добавить

<canvas id="pie" class="chart chart-pie" chart-data="data" chart-series="series" chart-labels="labels" chart-options="options" chart-colors="colors" chart-dataset-override="datasetOverride">
        chart-series="series"
      </canvas>