我在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>
Controller
$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'} };
我似乎只能改变整个图表的大小，我在文档中找不到任何更改图例大小的选项 .
任何帮助将深表感谢 . 提前致谢 .