Question

我是新的谷歌排行榜和angularjs，我在相同的高度和宽度水平相同的潜水上制作了两个饼图.Pie图表都很好，大小相同但对齐，但我有的传奇标签有点长和谷歌图表默认情况下将其关闭并放在第二行：确保图表增加解决方案的宽度对我不起作用，因为我有两个饼图如果我增加图表宽度然后第二个饼图移动到下面我希望它们两个在同一行。这是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 and hardware', 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];
});

当字符串变长时，您可以看到图例标签被切断并显示在拖曳线或3行中。它应该在同一行上至少20个字符。

任何建议都指导我如何做到这一点。谢谢

Answer 1

没有以编程方式解决方案，您必须确保图例有足够的空间。

在您的特殊情况下，当您调整chartArea的宽度时，它将起作用（不设置API将使用某些填充的宽度）。

您还应该调整图例的字体大小。

   chart1.options = {
       chartArea:{height:'200',
                  width:'100%'},
       legend:{textStyle:{fontSize:10}},
       width:400,
       height:300
   };

http://plnkr.co/edit/eVIEWdRf6VFv9XhZM6z7?p=preview

如何使用Google Chart在单行显示图例的全文？

1 个答案: