如何防止在谷歌圖表上切斷圖例？

Question

我使用來自here的angular-google-chart來顯示谷歌條形圖的示例如下。正如你可以從下面的圖片看到的，我的標籤，傳說是部分隱藏的。如何顯示全文？

下面是代碼：

angular.module("google-chart-sample", ["googlechart", "googlechart-docs"]) 
.controller("GenericChartCtrl", function ($scope) { 
    $scope.chartObject = {}; 

    $scope.chartObject.type = "BarChart"; 

    $scope.onions = [ 
     {v: "Onions"}, 
     {v: 3}, 
    ]; 

    $scope.chartObject.data = {"cols": [ 
     {id: "t", label: "Topping", type: "string"}, 
     {id: "s", label: "Slices", type: "number"} 
    ], "rows": [ 
     {c: [ 
      {v: "Mushrooms"}, 
      {v: 3}, 
     ]}, 
     {c: $scope.onions}, 
     {c: [ 
      {v: "Olives"}, 
      {v: 31} 
     ]}, 
     {c: [ 
      {v: "Zucchini"}, 
      {v: 1}, 
     ]}, 
     {c: [ 
      {v: "Pepperoni"}, 
      {v: 2}, 
     ]} 
    ]}; 

    $scope.chartObject.options = { 
     'title': 'How Much Pizza I Ate Last Night' 
    }; 
}); 

Answer 1

爲了防止圖例標籤被切斷，你可以設置chartArea屬性：

與成員配置佈局的對象和圖表區域的大小（圖表本身的繪製位置，不包括軸和 圖例）。支持兩種格式：一個數字或一個數字，然後是 ％。簡單的數字是以像素爲單位的值;一個數字後跟％是一個 百分比。 Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型：對象 默認：空

例

angular.module("google-chart-sample", ["googlechart"]) 
 
.controller("GenericChartCtrl", function ($scope) { 
 
    $scope.chartObject = {}; 
 

 
    $scope.chartObject.type = "BarChart"; 
 

 

 
    $scope.chartObject.data = { 
 
     "cols": [ 
 
      { id: "t", label: "Topping", type: "string" }, 
 
      { id: "s", label: "Slices", type: "number" } 
 
     ], "rows": [ 
 
      { 
 
       c: [ 
 
        { v: "Mushrooms" }, 
 
        { v: 3 }, 
 
       ] 
 
      }, 
 
      { c: [ 
 
        { v: "Onions" }, 
 
        { v: 3 }, 
 
        ] 
 
      }, 
 
      { 
 
       c: [ 
 
        { v: "Olives" }, 
 
        { v: 31 } 
 
       ] 
 
      }, 
 
      { 
 
       c: [ 
 
        { v: "Zucchini" }, 
 
        { v: 1 }, 
 
       ] 
 
      }, 
 
      { 
 
       c: [ 
 
        { v: "Pepperoni" }, 
 
        { v: 2 }, 
 
       ] 
 
      } 
 
     ] 
 
    }; 
 

 
    $scope.chartObject.options = { 
 
     'title': 'How Much Pizza I Ate Last Night', 
 
     chartArea: { width: "60%" } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.0.11/ng-google-chart.js"></script> 
 
<div ng-app="google-chart-sample" ng-controller="GenericChartCtrl"> 
 
    <div google-chart chart="chartObject" style="height:600px; width:480px;"></div> 
 
</div>