标签太长时,将删除饼图的图例标签。我已经尝试过将宽度设置为“100%”,但是我的传说足以解决这个问题。有没有一种方法可以分别定义饼图大小和图例大小?有人可以分享一个可行的例子吗?
JS fiddle 的链接:https://jsfiddle.net/2nzzLe18
容器div的尺寸和图例标签的字体大小是我要求的一部分。
下面也是代码,
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['info regarding task Work', 11],
['info regarding task Eat', 2],
['info regarding task Commute', 2],
['info regarding task Watch TV', 2],
['info regarding task Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
chartArea: {left: -100, width: '100%'},
legend: {textStyle: {fontSize: 15}},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
谢谢,
法汉
最佳答案
正确设置饼图的大小可能很麻烦,
但是归结为调整整个图表div
的大小,
和绘制饼图的chartArea
的大小(与图例分开)
这可能很棘手,因为它并不总是响应您的想法,
但是我能够显示整个图例
请参阅以下工作片段,
将整体大小从style
上的div
属性移动了
到图表的选项,然后调整了chartArea
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['info regarding task Work', 11],
['info regarding task Eat', 2],
['info regarding task Commute', 2],
['info regarding task Watch TV', 2],
['info regarding task Sleep', 7]
]);
var options = {
backgroundColor: 'cyan',
title: 'My Daily Activities',
chartArea: {
left: 0,
height: 250,
width: 600
},
height: 300,
width: 600,
legend: {
maxLines: 1,
textStyle: {
fontSize: 15
}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>