谷歌折线图 v 轴在添加超过 2 个时重叠

Question

在Google 折线图中添加 2 个以上的 v 轴会使右侧的轴重叠。 使用示例代码功能进行 https://code.google.com/apis/ajax/playground/?type=visualization#line_chart

重现示例代码：

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",width: 500, height: 400,
vAxes: {0: {logScale: false},
1: {logScale: false, maxValue: 10},
2:{logScale:false}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:2}}}
);
}

有解决方法吗？

Answer 1

正如我在评论中所说：一种可能性是将textPosition: 'out'用于一个轴，textPosition: 'in'用于另一个轴。在这种情况下，你会得到不重叠的数字。

有一个risky选项："手动"更改 DOM 元素。轴标签在 DOM 中具有以下标记和属性(x 和 y 值不同)：

<text text-anchor="start" x="452" y="327.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0,40</text>

轴标签低于 x 轴具有属性文本锚点"中间"，图表左侧的标签具有值"结束"，右侧的标签和图例标记具有值"开始"。那些重叠的具有相同的x值，y是不同的。因此，其中一半必须向右移动(x 值已更改)：

...
var labels = document.querySelectorAll('text[text-anchor=start]');
// find limits of same x
var xMin = -1, xMax = -1;
for (var i = 1; i < labels.length; i++) {
if (labels[i - 1].attributes[1].value == labels[i].attributes[1].value) {
if (xMin == -1 ) xMin = i - 1;
xMax = i;
}
}
if (xMax != -1) {
// change just half of them
for (var i = xMin + (xMax - xMin + 1)/2; i <= xMax; i++) {
var value = parseInt(labels[i].attributes[1].value);
labels[i].attributes[1].value = value + 35;
}
}
...

这只是为了锻炼，我不会使用它，因为谷歌第一次决定将文本锚点更改为其他内容或标签序列中的某些内容更改或有人决定将 2 个轴放在左侧时它会失败......

参见 jsbin 的示例