javascript - 谷歌图表的动态样式

Question

我正在尝试使用输入字段中的值动态更新 google-chart 指令的宽度和高度。宽度和高度未更新。

Plunker

$scope.height = "300"
$scope.width = "300"
$scope.cssStyle = "height:" + $scope.height+ "px; height:" + $scope.width + "px";

Answer 1

使用 chart.options 更新 google-chart 属性，例如 title、width、height 等。

通过更改 chart.options 的值，无需更改 div 的宽度和高度。

使用ng-change更新chat.options的值

通过添加 ng-change 更新 input 元素

<input type="text" value="300px" ng-change="change()" ng-model="width"/>
<input type="text" value="300px" ng-change="change()" ng-model="height"/>

将以下change()函数添加到 Controller

$scope.change = function() {
   $scope.chart.options = {
      height: $scope.width,
      width: $scope.height,
  };
}

检查更新plunkr