グリッド線はカテゴリ軸ではサポートされていません。問題のデータはカテゴリ（X軸ラベル）として文字列を使用しているため、それらをどのように「分割する必要があるか」を判断する方法はありません。ただし、次の方法でこれを回避できます。
秘訣1：データを数値化する
つまり、現在、グリッド線がないことを意味する文字列があります。ただし、グリッド線が必要なので、その小さな問題を修正する必要があります。したがって、最初の列（X）を、その上にマウスを置くと（および凡例で）「A」または「B」または「C」と表示されるようにフォーマットが設定された数値に変換します。
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addRows([
[{v: 1, f:'A'}, 1, 10],
[{v: 2, f:'B'}, 2, 5],
[{v: 3, f:'C'}, 4, 12],
[{v: 4, f:'D'}, 8, 5]
]);
ただし、これでは問題は解決しません。これで、下の軸に数字が表示され、0.8の奇妙な間隔で切り取られます。だから私たちはそれを修正したいと思います。残念ながら、hAxisを使用すると、最小/最大値を設定して固定することはできません（理由はわかりません）。オプションにbaseline：0を追加することで、最小値を修正できます。
最大値を取得するには、ダミーシリーズを追加する必要があります。
すべてをまとめると、次のようになります。
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
// This dummy series is to extend the chart from 0-5 for padding
data.addColumn('number', null);
data.addRows([
[{v: 1, f:'A'}, 1, 10, null],
[{v: 2, f:'B'}, 2, 5, null],
[{v: 3, f:'C'}, 4, 12, null],
[{v: 4, f:'D'}, 8, 5, null],
[{v: 5, f:''}, null, null, {v: 0, f:''}]
]);
options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
// Show a baseline at 0
baseline: 0,
// 6 Gridlines, 4 labels + left and right for padding
gridlines: {
count: 6
},
},
vAxis: {
baseline: 0,
},
series: [
{},
{},
// Hide our dummy series
{
lineWidth: 0,
pointsize: 0,
visibleInLegend: false
},
]
};
chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
chart1.draw(data, options);
}
今、それはあなたが望むもののように見えます。2つの主要な問題があります。1つは、グラフの右下にマウスを置くと、空白のツールチップがポップアップすることです（グラフをイベントとインタラクティブにすると、エラートラップを実行する必要があるかもしれませんが、これは大きな問題ではありません）。もう1つは、グラフの下部に文字ではなく数字が表示されていることです。
残念ながら、数字を文字としてフォーマットする簡単な方法はありません（少なくとも、Googleが日付/数字だけでなくICUパターンセット全体を実装するまで）。したがって、別の回避策を作成する必要があります。基本的に、私がしていることは、ラベルを作成するためだけにまったく新しいチャートを作成することです。次に、ラベル以外のすべてが非表示になるようにフォーマットし、上のグラフと水平に並ぶようにします。
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
// This dummy series is to extend the chart from 0-5 for padding
data.addColumn('number', null);
data.addRows([
[{v: 1, f:'A'}, 1, 10, null],
[{v: 2, f:'B'}, 2, 5, null],
[{v: 3, f:'C'}, 4, 12, null],
[{v: 4, f:'D'}, 8, 5, null],
[{v: 5, f:''}, null, null, {v: 0, f:''}]
]);
options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
// Show a baseline at 0
baseline: 0,
// 6 Gridlines, 4 labels + left and right for padding
gridlines: {
count: 6
},
// Hide our labels
textPosition: 'none'
},
vAxis: {
baseline: 0,
},
series: [
{},
{},
// Hide our dummy series
{
lineWidth: 0,
pointsize: 0,
visibleInLegend: false
},
]
};
// Add dummy data for the axis labels
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'x');
data2.addColumn('number', 'dummy');
data2.addRows([
['A', null],
['B', null],
['C', null],
['D', null]
]);
chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
chart1.draw(data, options);
chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
chart2.draw(data2,
{
chartArea: {
top:0,
height:"0%"
},
min: 0,
max: 0,
hAxis: {
baselineColor: '#FFFFFF'
},
vAxis: {
baselineColor: '#FFFFFF',
direction: -1,
textPosition: 'none',
gridlines: {
color: '#FFFFFF'
}
}
});
}
最初のものの下にもう1つ作成し、CSSを使用して適切に位置合わせします（同じ位置などにフロートさせます）。ラベルは上のグラフに属しているように見えます。
それは栄光ではありませんが、機能します。
ありがとうございます！