Как показать полный текст легенды в одной строке с помощью Google Chart?

Question

Как показать полный текст легенды в одной строке с помощью Google Chart?

0

Я новые диаграммы google и angularjs, я сделал две круговые диаграммы на одном и том же погружении по горизонтали на одинаковой высоте и ширине. Графики в хорошем состоянии одинакового размера и выровнены, но ярлык легенды, который у меня есть, немного длинный, а диаграммы google по умолчанию разрезают его выключить и поместить во второй строке: убедитесь, что ширина увеличения диаграммы решения не сработала для меня, потому что у меня есть диаграммы круговых диаграмм, если я увеличиваю ширину диаграммы, а 2 круговые диаграммы движутся ниже, я хочу, чтобы они оба были в одной строке. вот пример кода в 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 символов.

любое предложение подскажет мне, как я могу это сделать.

Hassan 20 авг. 2015, в 13:43

Источник

Теги:

angularjs

legend

google-visualization

1 ответ

Ещё вопросы

Dr.Molle · Answer 1 · 2015-08-20T20-44-00.000Z

Программного решения нет, вы должны убедиться, что для легенды достаточно места.

В вашем специальном случае он будет работать, когда вы отрегулируете ширину chartArea (без установки ширины API будет использовать некоторое дополнение).

Вы также должны настроить размер шрифта для легенды.

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

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