在angular-chart.js中使图例大小不变

Question

我正在angularjs中使用angular-chart.js

我想将饼图的图例大小固定为固定值，并使它们对齐。

这就是我现在所拥有的

我希望第一个饼图的大小与其他两个饼图的大小相同，并且图例在同一行中开始，如下图所示。

一些代码如下：

HTML     

<!-- Staffing chart -->
<div style="float:left; display:inline-block;">
<canvas class="chart chart-pie" chart-data="staffing_pie_data" chart-labels="staffing_pie_labels" chart-colors="staffing_pie_colors" chart-options="staffing_pie_options" width="325" height="400"></canvas>
</div>
<!-- Beds chart -->
<div style="float:left; display:inline-block;">
<canvas class="chart chart-pie" chart-data="beds_pie_data" chart-labels="beds_pie_labels" chart-options="beds_pie_options" width="325" height="400"></canvas>
</div>
<!-- Patient Status chart -->
<div style="float:left; display:inline-block;">
<canvas class="chart chart-pie" chart-data="patient_status_pie_data" chart-labels="patient_status_pie_labels" chart-options="patient_status_pie_options" width="325" height="400"></canvas>
</div>
<!-- Resources chart -->
<div style="float:left; display:inline-block;">
<canvas class="chart chart-bar" chart-data="resource_bar_data" chart-labels="resource_bar_labels" chart-series="resource_bar_series" chart-options="resource_bar_options" width="400" height="400"></canvas>
</div>

</div>

控制器

$scope.staffing_pie_options = { global: { responsive: true }, 
legend: { display: true, position: 'bottom', labels:{'boxWidth':20, 'fontSize':10} }, 
title: {display: true, text: 'Staffing'} };

$scope.beds_pie_options = { global: { responsive: true }, 
legend: { display: true, position: 'bottom', labels:{'boxWidth':20, 'fontSize':10} }, 
title: {display: true, text: 'Beds Status'} };

$scope.patient_status_pie_options = { global: { responsive: true }, 
legend: { display: true, position: 'bottom', labels:{'boxWidth':20, 'fontSize':10} }, 
title: {display: true, text: 'Patient Status'} };

我似乎只能更改整个图表的大小，我在文档中找不到用于更改图例大小的任何选项。

任何帮助将不胜感激。 预先感谢。