Joh*_*uet 8 javascript google-visualization
我正在实施Stacked Bar Google Chart.我发现当我的类别跨越多行并且图例位于顶部时,图例将换行到多行,由hAxis变量上的maxLines选项控制.
但是,如果我将图例移动到底部,则图例不再包装,而是提供类别的分页视图.当图例位于顶部且maxLines选项设置为1时,这是相同的行为.
这是我的小提琴.顶部的图形顶部有图例,底部的图例顶部有图例......我这样做是为了让它变得简单......
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, 20, 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);
}
Run Code Online (Sandbox Code Playgroud)
呃......刚刚在谷歌的网站上找到了这个:
图例中的最大行数.将此值设置为大于1的数字,以便为图例添加线条.注意:用于确定实际渲染的行数的确切逻辑仍在不断变化.
此选项目前仅在legend.position为"top"时有效.
类型:数字默认值:1
https://developers.google.com/chart/interactive/docs/gallery/linechart
| 归档时间: |
|
| 查看次数: |
4326 次 |
| 最近记录: |