15

我遵循了 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>  

在此处输入图像描述

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

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

根据另一个 SO 问题中接受的答案,chart-legend="true"应该足以使其工作。

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

4

2 回答 2

48

如果您使用的是基于 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>
于 2016-05-18T13:47:46.173 回答
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>

这看起来像

于 2017-09-23T07:39:09.920 回答