如何使用Google圖表在單行上顯示圖例的全文？

我是新的谷歌圖表和angularjs，我做了兩個相同的水平上相同的高度和width.Pie圖表水平相同的大小和對齊，但我的傳奇標籤是小長和谷歌圖表默認關閉它，並將其放在第二行：請確保圖表增加解決方案的寬度不適用於我，因爲我有兩個餅圖，如果我增加圖表寬度，然後第二個餅圖移動到下面，我希望它們兩個都在同一排。這裏是index.html中的示例代碼：如何使用Google圖表在單行上顯示圖例的全文？

  <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個字符。

任何建議，指導我，我該怎麼辦this.thanks

來源

2015-08-20 Hassan

沒有編程解決方案，必須確保有圖例足夠的空間。

在你的特殊情況下，當你調整chartArea的寬度時（不設置API將使用一些填充的寬度），它將工作。

您還應該調整圖例的字體大小。

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

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

來源

2015-08-20 23:26:22

如何使用Google圖表在單行上顯示圖例的全文？

回答

相關問題