web-dev-qa-db-ja.com

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>

enter image description here

また、コントローラーで凡例の配列を定義しようとしましたが、

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

他のSO質問、chart-legend="true"はそれを機能させるのに十分なはずです。

誰もがこのライブラリを使用した経験があり、この問題を解決する方法を知っていますか？

angularjsangular-chart
14
tim_xyz

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>
46
Livie

私は同様の問題を抱えていたので、円グラフの幅を広げ、凡例をグラフの右側に配置して、見栄えを良くしました

これをコントローラーに追加できます

 $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

2
Ron