早上好：
我想以一定角度显示条形图刻度线标签。那可能吗？包括我的代码，使用来自Google的简单图表。
感谢您的协助，娜塔莉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300,
'hAxis':{
ticks: [250, 300,],
gridlines: {color: 'blue'},
textStyle:{color: 'blue',}
},
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
只需添加slantedText: true到您的配置选项
如果需要特定角度，请使用 slantedTextAngle: number
请参阅以下示例...
google.charts.load('current', {
callback: function () {
new google.visualization.BarChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]),
{
title: 'How Much Pizza I Ate Last Night',
width: 400,
height: 300,
hAxis: {
ticks: [250, 300],
gridlines: {color: 'blue'},
// slant hAxis labels
slantedText: true,
slantedTextAngle: 33,
textStyle: {color: 'blue'}
}
}
);
},
packages:['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句