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

tim*_*xyz 14 angularjs angular-chart

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

文档:http
://jtblin.github.io/angular-chart.js/类似的问题:如何在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>  
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

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

$scope.legend = ["complete", "incomplete"]
Run Code Online (Sandbox Code Playgroud)

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

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

Liv*_*vie 46

如果您正在使用基于chart.js 2的1.0.0-alpha分支,则正确的语法是:

$scope.options = {legend: {display: true}};
Run Code Online (Sandbox Code Playgroud)

并在你的HTML中

<canvas id="pie"
            class="chart chart-pie"                
            chart-data="data"
            chart-labels="labels"
            chart-options="options">
 </canvas>
Run Code Online (Sandbox Code Playgroud)

  • 是的,您可以在控制器中设置选项:$ scope.options.legend.position:"bottom"; 你可以在这里找到所有的信息:http://www.chartjs.org/docs/#chart-configuration-legend-configuration (2认同)