0

angularjs を使用した小さな webapp があり、angularJS ライブラリから 2 つのチャートを訴えようとしています。バーとパイを使っています。それらは正常にレンダリングされますが、何らかの理由で、ディスプレイが小さくなったり大きくなったりしてもサイズ変更を拒否します。

私の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 に答える