如何防止角度 - 谷歌图表上的图例被切断？

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%'}

     

键入：object   默认值：null

示例

＆＃13;

＆＃13;

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%" }
    };
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;