Question

我使用了几种类型的highcharts-ng，水平条形图似乎很特别 - 我很难让图表宽度适应屏幕尺寸。为了说明问题，我创建了一个jsfiddle。默认情况下，它具有600px的固定大小，而不是整个可用宽度。我尝试了各种方法来相应地调整宽度，但它们都没有完美地工作。一种方法是使用$ window.onresize，如代码所示，但它不起作用。但是，如果我放置一个运行相同代码的Resize按钮，它确实有效。为什么？

HTML：

<div ng-app="myapp">
  <div ng-controller="myctrl">
    <input ng-model="chart.title.text">
    <button ng-click="resize()">Resize</button>
    <highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>
  </div>
</div>

JS：

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function($scope, $window) {

  $scope.resize = function() {
    $scope.chart.options.chart.width = $window.innerWidth;
  }
  $window.onresize = function() {
    $scope.chart.options.chart.width = $window.innerWidth;
  }

  $scope.chart = {
    options: {
      chart: {
        type: 'bar'
      }
    },
    series: [{
      data: [10, 15, 12, 8, 7]
    }],
    title: {
      text: 'Hello'
    }
  }
});

Answer 1

this中的

window.onresize引用全局窗口对象，该对象没有与$scope.toggleWidth相对的图表配置对象，其中this引用图表的范围

图表配置可以这样访问：

$window.onresize = function () {
  var chart = $scope.chart.options.chart;
  if (chart.width === 400) {
        chart.width = 800
    } else {
        chart.width = 400
    }
  $scope.$digest();
};

onresize您需要手动调用$digest()。

示例：http://jsfiddle.net/wscqtdvo/

如何使highcharts-ng水平条形图响应

1 个答案: