我在我的项目中使用Google图表,我要求图表的x轴和y轴标签都应从上到下开始,因此在下面的代码中,x轴点已移到顶部,现在我也想从顶部到底部而不是从底部到顶部开始Y轴点。在这里,我写了下面的代码,任何人都可以帮助我们。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'top'}
},
y: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
`
direction
有轴配置选项
值沿轴增长的方向。指定-1以反转值的顺序。
这里的问题是Material图表不支持此选项,见Tracking Issue for Material Chart Feature Parity ...
和Classic图表没有选择将x轴显示在顶部。
但是,我们可以在'ready'
事件上手动修改图表。为了解决这个问题,我们使用Classic图表,并反转y轴标签的顺序。然后手动将x轴标签移到顶部。
vAxis: {
direction: -1
}
但是首先,我们必须使用以下选项在顶部创建空间。
chartArea: {
top: 72
},
我们还必须将标题稍微上移,以便为标签腾出空间。
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
title: 'Box Office Earnings in First Two Weeks of Opening\nin millions of dollars (USD)',
width: 900,
height: 500,
chartArea: {
top: 72
},
vAxis: {
direction: -1
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
var fontSize;
var yCoord;
Array.prototype.forEach.call(labels, function(label) {
fontSize = parseFloat(label.getAttribute('font-size'));
switch (label.getAttribute('text-anchor')) {
// chart title
case 'start':
yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord - fontSize);
break;
// x-axis labels
case 'middle':
label.setAttribute('y', chartBounds.top - (fontSize / 2));
break;
// y-axis labels
default:
// ignore
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>