如何防止在angular-google-chart上切斷圖例？

Question

我下面為表示使用角谷歌-圖表從谷歌條形圖示例這里 。 從下圖可以看到，我的標簽圖例被部分隱藏。 如何顯示全文？

這是代碼：

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>