Google圖表的動態樣式

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()函數添加到控制器

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

檢查更新的plunkr

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會根據您的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屬性。 該指令監視該對象並響應更改。

Answer 4

基本上發生的事情是cssStyle屬性是一種綁定方式，因此您需要做的是，按以下方式計算width或height屬性的css樣式屬性：

$scope.$watchGroup(["width", "height"], function(newValues, oldValues){
    $scope.cssStyle = "height:" + $scope.height+ "px; width:" + $scope.width + "px";
  })

注意：將角度提高到1.3.0 ，則將獲得$watchGroup方法的作用域。 檢查插栓： http ://plnkr.co/edit/WEe3rPzapIBz3uhoGabI?p=preview