google图表的动态样式

Question

我试图使用输入字段中的值动态更新google图表指令的宽度和高度。宽度和高度没有更新。

柱塞

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

Answer 1

使用chart.options更新谷歌图表属性，如title、width、height等.

通过改变chart.options div**.**的值不需要改变的宽度和宽度

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

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

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

将下面的change()函数添加到控制器

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

检查更新的普鲁克尔

Answer 2

错在第三行？

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

成为

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

Answer 3

在样式声明中有一个错误：

//"height:" + $scope.height+ "px; height:" + $scope.width + "px";
  "height:" + $scope.height+ "px; width:" + $scope.width + "px";

$scope.cssStyle不会随着$scope.height和$scope.width的变化而不断更新。要解决这个问题，可以将$scope.cssStyle转换为返回计算的函数。

<div google-chart chart="chart" style="{{cssStyle()}}"/>

$scope.cssStyle = function() {
  return "height:" + $scope.height+ "px; width:" + $scope.width + "px";
};

这样，cssStyle就会按您的要求进行更新，但是google-chart指令似乎没有使用新的参数进行更新。您可以通过从DOM中删除它并重新添加它来破解它。

<div ng-if="on" google-chart chart="chart" style="{{cssStyle}}"/>

$scope.$watch(function() {
  // watch this for changes
  return "height:" + $scope.height+ "px; width:" + $scope.width + "px";
}, function(style) {
  // there is a new style
  $scope.on = false; // remove chart
  $timeout(function() {
    // trigger another digest cycle to add chart with new style
    $scope.cssStyle = style;
    $scope.on = true;
  });
});

点击这里进行现场演示。

归功于Sarjan的回答--他发现更新google-chart维度的最佳方法是使用chart对象的options属性。该指令监视该对象并响应更改。