2016-05-09 5 views
12

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

Документация: http://jtblin.github.io/angular-chart.js/
Похожие SO вопрос: How to color legend in 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> 

enter image description here

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

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

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

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

ответ

42

Если вы используете 1.0.0-альфа ветку, основанную на 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> 
+0

сверху появляется легенда, и влияет на размер пирога. Есть ли способ разместить его ниже? – user3631341

+2

Да, вы можете установить параметры в своем контроллере: $ scope.options.legend.position: «bottom»; вы можете найти всю информацию здесь: http://www.chartjs.org/docs/#chart-configuration-legend-configuration – Livie

+0

Вы спасли мою жизнь, спасибо! :) – Sparw

0

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

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

$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> 

This How it Looks Like

Смежные вопросы