如何开始y轴点从Google图表的顶部开始 [英] How to start y-axis points starts from top in google charts
问题描述
我在我的项目中使用google图表，我要求图表的x轴和y轴标签都应该从上到下开始，因此在下面的代码中，x轴点移到了顶部，并且现在我也想从顶部到底部而不是从底部到顶部开始Y轴点.在这里，我写了下面的代码，任何人都可以帮助我们.
I'm using google charts for my project and I have requirement of a chart both x-axis and y-axis labels should start from up to bottom , So In the below code x-axis points are moved to top , And now also i want to start the Y-axis point begin from top to bottom and not bottom to top. Here I written the code below, Can any one help us.
<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
there is an axis configuration option for: direction
值沿轴的增长方向.指定-1可反转值的顺序.
The direction in which the values along the axis grow. Specify -1 to reverse the order of the values.
这里的问题是材料图表不支持此选项，
参见物料图特征奇偶性跟踪问题 ...
the problem here is that Material charts do not support this option,
see Tracking Issue for Material Chart Feature Parity...
和经典图表无法选择在顶部显示x轴.
and Classic charts do not have an option to present the x-axis on top.
但是，我们可以在'ready'事件上手动修改图表.
要解决此问题，我们使用 Classic 图表，并反转y轴标签的顺序.
然后手动将x轴标签移到顶部.
however, we can manually modify the chart on the 'ready' event.
to resolve, we use a Classic chart, and reverse the order of the y-axis labels.
then manually move the x-axis labels to the top.
vAxis: {
direction: -1
}
但是首先，我们必须使用以下选项在顶部创建空间.
but first, we must use the following option to create room at the top.
chartArea: {
top: 72
},
我们还必须稍微向上移动标题，以便为标签腾出空间.
we must also move the title up slightly, to make room for the labels.
请参阅以下工作摘要...
see following working snippet...
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>这篇关于如何开始y轴点从Google图表的顶部开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
