0

我有一个使用 angularjs 的小型 webapp，我正试图从angularJS 库中起诉两个图表。我正在使用酒吧和馅饼。它们渲染得很好，但由于某种原因，它们拒绝随着显示器变小或变大而调整大小。

我的 HTML 代码：

<div class="chartWrapper" ng-show="true" layout="row" layout-align="center center" md-whiteframe="3">
  <canvas id="pie" class="chart chart-pie" chart-data="pieData" chart-labels="chartLabels" chart-legend="true"></canvas>
  <canvas id="bar" class="chart chart-bar" chart-data="chartData" chart-legend="true" chart-labels="chartLabels" chart-series="series"></canvas>
</div>

我的包装器 CSS 代码

.chartWrapper{
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
  width: 80% !important;
}

我的 Javascript 代码

angular.module('app')
.config(['ChartJsProvider', function (ChartJsProvider) {
  // Configure all charts
  ChartJsProvider.setOptions({
    colours: ['#FF0000', '#0000FF'],
    responsive: true
  });
  // Configure all pie charts
  ChartJsProvider.setOptions('Pie', {
    datasetFill: true,
    chartLegend: true
  });
  // Configure all bar charts
  ChartJsProvider.setOptions('Bar', {
    datasetFill: true,
    chartLegend: true
  });
}])
.controller('mainCtrl', function($scope){
  var main = this;
  $scope.answered = answered;
  $scope.quAnswered = false;

  $scope.pieData = [30,50];
  $scope.chartData = [[30,60],[50,20]];
  $scope.chartLabels = [ 'Female', 'Male'];
  $scope.series = ['Pepsi', 'Coca-Cola'];

  Chart.defaults.global.responsive = true;

  function answered(){

  }



})
4

1 回答 1

0

“显示器变小或变大”是什么意思？如果只有父容器调整大小，则图表不会调整大小，因为 Chart.js 库只能监听窗口调整大小事件（没有其他可以监听的调整大小事件）。

在最新版本中，如果您通过$resize在scope. 见https://github.com/jtblin/angular-chart.js/#events

于 2016-06-20T06:57:47.757 回答