1
Google Chartsの縦棒グラフのhAxisに日付値を使用すると、ラベルはバーグループディバイダの下に表示されます(下の図を参照)。私が文字列を使うと、これは起こりません。 日付ラベルを各バーグループの中央に表示する方法を知りましたか?Google ChartsのセンタリングラベルhAxis
Google Chartsの縦棒グラフのhAxisに日付値を使用すると、ラベルはバーグループディバイダの下に表示されます(下の図を参照)。私が文字列を使うと、これは起こりません。 日付ラベルを各バーグループの中央に表示する方法を知りましたか?Google ChartsのセンタリングラベルhAxis
あなたは
は、各目盛り/ラベルのデータから日付を使用... hAxis
オプションのticks
独自に提供することができます...
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
は、オプションに割り当てます...
hAxis: {
ticks: ticks
},
...作業スニペット以下を参照してください
google.charts.load('current', {
packages: ['corechart']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addColumn('number', 'y1');
data.addRows([
[new Date(2017, 07, 08), 200, 210],
[new Date(2017, 07, 15), 190, 220],
[new Date(2017, 07, 22), 205, 200]
]);
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
chartArea: {
bottom: 24,
height: '100%',
left: 48,
right: 96,
top: 24,
width: '100%'
},
hAxis: {
ticks: ticks
},
height: '100%',
title: 'Title',
width: '100%'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
は、それは確かに助け、感謝@whitehat!主な相違点は、ティックがバーの間にあることです。つまり、hAxisのラベルはティックの周りに、もちろんバーの下に配置されます。私が必要なもののために十分に良い!乾杯! –