我正在实施Stacked Bar Google Chart.我发现当我的类别跨越多行并且图例位于顶部时,图例将换行到多行,由hAxis变量上的maxLines选项控制.
但是,如果我将图例移动到底部,则图例不再包装,而是提供类别的分页视图.当图例位于顶部且maxLines选项设置为1时,这是相同的行为.
这是我的fiddle.顶部的图表顶部是传说,底部的图例顶部是传说……我这样做是为了让它变得简单……
google.load('visualization','1',{packages: ['corechart','bar']});
google.setonLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre','Fantasy & Sci Fi','Romance','Mystery/Crime','General','Western','Literature',{ role: 'annotation' } ],['2010',10,20,30,15,5,''],]);
var options = {
width: 550,height: 160,chartArea: {height: '45%' },legend: { position: 'top',maxLines: 3 },bar: { groupWidth: '55%' },hAxis: { maxValue: 100,ticks: [0,25,50,75,100] },isstacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data,options);
var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
options.legend.position = "bottom";
chart2.draw(data,options);
}
解决方法
呃……刚刚在谷歌的网站上找到了这个：
Maximum number of lines in the legend. Set this to a number greater
than one to add lines to your legend. Note: The exact logic used to
determine the actual number of lines rendered is still in flux.This option currently works only when legend.position is ‘top’.
Type: number Default: 1
https://developers.google.com/chart/interactive/docs/gallery/linechart