如何在 google 图表中制作方形图例？

Question

我是 angularjs 和 google 图表的新手，我使用 google 图表制作饼图，但默认情况下它以圆形形式显示图例，但我想制作它如何做到这一点。此外，如果图例标签很长，即 "software and hardware stores"，那么它不会在一行中显示在第一行的软件在第二行的硬件上，然后再显示。我想让它与图例符号对齐，它应该显示在一行上。这是我在 Index.HTML:

中的代码

         <head>
           <script src="http://code.angularjs.org/1.2.10/angular.js"></script>
           <script src="script.js"></script>
           <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
         </head>

         <body ng-controller="MainCtrl">
           <div style="padding-left:100px">
                my pig pie chart</div>
         <div google-chart chart="chart" style="width:400,height:300"></div>
         </body>

Script.js:

    var app = angular.module('myApp', [ 'googlechart' ]);

     app.controller('MainCtrl', function($scope) {
      var chart1 = {};
      chart1.type = "PieChart";
      chart1.data = [
       ['Component', 'cost'],
       ['Software hardware and electrice', 50000],
       ['Hardware', 80000]
  ];
       chart1.data.push(['Services',20000]);
        chart1.options = {
       'legend':'right',
        'width':400,
        'height':300
   };
  chart1.formatters = {
      number : [{
      columnNum: 1,
      pattern: "$ #,##0.00"
    }]
  };

   $scope.chart = chart1;

     $scope.aa=1*$scope.chart.data[1][1];
    $scope.bb=1*$scope.chart.data[2][1];
    $scope.cc=1*$scope.chart.data[3][1];
});

任何建议指导我如何做 this.thanks

Answer 1

一种选择是增加图表的宽度，直到所有文本都适合一行。由于饼图希望保持居中，因此您需要 1000 像素宽和 300 像素高的东西。如果您使用图表区域选项，您可能会少很多。

另一个选项是设置legend.position='bottom'。这使得所有图例项目在图表下方排成一行。在这种情况下，如果您的字符串对于图表的大小来说太长，那么它会截断您的字符串，但它不需要像使整个图表非常宽那样宽的总 space。

如何在 google 图表中制作方形图例？

How to make square legend in google chart?

legend

google-visualization

angularjs

pie-chart