我需要显示所有的hAxis标签。
完整的代码超过4000行代码,因此我将粘贴我认为是代码中唯一重要部分的内容:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
if(i%10==0)
{
data.addRow(['' + i / 10 + '', elevations[i].elevation]);
}
else
{
data.addRow([null, elevations[i].elevation]);
}
}
document.getElementById('chart_div').style.display = 'block';
chart.draw(data, {
height: 250,
colors: ['#F00'],
legend: 'none',
titleY: 'Elevation (m)',
titleX: 'Distance',
hAxis: {
slantedTextAngle: 90,
showTextEvery: 1,
}
});
这是当前结果:
我需要hAxis的距离以正确的字体大小和角度显示0 1 2 3 4 5 6 7...。
注意:除了10的倍数之外,我都在所有地方打印空的标题名称,因此,如果有一种不将标题添加到该列的方法,它也将起作用!
最佳答案
基本上,您要做的就是将hAxis.showTextEvery
设置为10
要从工具提示中省略第一列的值,请使用工具提示列。
设置hAxis.slantedTextAngle
选项时,还将hAxis.slantedText
选项设置为true
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
//some dummy-data
var elevations = [];
for (var i = 0; i < 300; ++i) {
elevations.push({
elevation: 100 * Math.random()
})
}
var results = elevations;
//dummy-data end
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
data.addColumn({
type: 'string',
role: 'tooltip'
});
for (var i = 0; i < results.length; i++) {
data.addRow([String(i / 10),
elevations[i].elevation,
String(elevations[i].elevation)
]);
}
document.getElementById('chart_div').style.display = 'block';
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, {
colors: ['#F00'],
legend: 'none',
height: 250,
titleY: 'Elevation (m)',
titleX: 'Distance',
hAxis: {
slantedTextAngle: 90,
slantedText: true,
showTextEvery: 10,
}
});
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>