如何使用Google Chart在单行上显示图例的全文？
如何使用Google Chart在单行上显示图例的全文？
提问于 2015-08-20 19:02:11
我是新的谷歌图表和角度，我做了两个饼图在相同的潜水水平相同的高度和width.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];
});您可以看到图例标签被剪下并显示在两行或三行中，因为字符串变长了，.it应该在同一行上至少显示20个字符。
任何建议都可以指导我如何做this.thanks
回答 1
Stack Overflow用户
发布于 2015-08-21 07:26:22
没有编程解决方案，您必须确保有足够的空间来放置图例。
在您的特殊情况下，它将在您调整chartArea的宽度时工作(没有设置API将使用某些填充的宽度)。
您还应该调整图例的字体大小。
chart1.options = {
chartArea:{height:'200',
width:'100%'},
legend:{textStyle:{fontSize:10}},
width:400,
height:300
};http://plnkr.co/edit/eVIEWdRf6VFv9XhZM6z7?p=preview
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32116491
复制相关文章
相似问题
腾讯云开发者
