当angular-chart.js中的图例数量不同时,保持图表大小不变

时间:2019-01-18 05:36:54

标签: charts chart.js pie-chart angular-chart

我有两个用角图并排显示的PIE图表。第一个PIE图表具有4个图例,第二个图表具有1个图例。 PIE大小不同。

enter image description here

无论我有多少图例项目,如何保持两个图表的PIE大小相同。

<div class="container" ng-app="app" ng-controller="ChartCtrl">
 <div class="charts">
  <div class="charts-div">

 <canvas id="pie" class="chart chart-pie" height="300" chart- 
data="data" chart-labels="labels"  chart-options="chartoptions1">
    </canvas>
   </div>

 <div class="charts-div">

 <canvas id="pie" class="chart chart-pie" height="300" chart- 
data="data1" chart-labels="labels1"  chart-options="chartoptions1">
   </canvas>
 </div>

 </div>
 </div>

angular.module("app", ["chart.js"])
 .controller("ChartCtrl", function($scope) {

$scope.labels = ["January", "February", "March", "April"];
//$scope.series = ['Series A', 'Series B'];
$scope.data = [65, 59, 80, 81];


$scope.labels1 = ['2006'];


$scope.data1 = [28];

$scope.chartoptions1 = {
  responsive: true,
  maintainAspectRatio: false,
  title: {
    display: true,
    text: 'test'
  },
  legend: {
    display: true,
    position: 'right'
  }
};

});

这是我创建的小提琴。 https://jsfiddle.net/gnhej1zo/2/

0 个答案:

没有答案