类别轴不支持网格线。因为有问题的数据使用字符串作为类别（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，您无法设置最小/最大值并坚持下去（我不知道为什么）。我们可以通过在我们的选项中添加基线：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);
}
现在它看起来更像你想要的。有两个主要问题。一个是，如果您将鼠标悬停在图表的右下角，则会弹出一个空白工具提示（我希望这不是一个大问题，尽管如果您使图表与事件交互，您可能必须进行一些错误捕获）。另一个是我们图表的底部显示的是数字，而不是字母。
不幸的是，没有简单的方法将数字格式化为字母（至少在 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'
}
}
});
}
只需在第一个下方再制作一个，并使用 CSS 将其正确对齐（将其浮动在同一位置，或诸如此类），看起来标签属于上面的图表。
这不是光荣的，但它有效。
非常感谢！