添加超过 2 个时，Google 折线图 v 轴重叠答案

【问题标题】：Google Line Charts v-axes overlaps when more than 2 are added添加超过 2 个时，Google 折线图 v 轴重叠
【发布时间】：2014-02-05 09:59:29
【问题描述】：

向 Google 折线图添加超过 2 个 v 轴会使右侧的 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}}}
          );
}

有解决办法吗？

【问题讨论】：

一种可能性是对一个轴使用textPosition: 'out'，对另一个轴使用textPosition: 'in'。不是最好的，但至少数字没有重叠。
图表不支持超过两个vAxes 很好，你唯一真正的选择是做@Anto Jurković 提到的事情。您可以提交feature request 以获得超过 2 个vAxes 的改进支持。

标签： javascript google-visualization linechart

【解决方案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 轴下方的轴标签具有属性 text-anchor 'middle'，图表左侧的标签具有值 'end'，右侧的标签和图例标记具有值 'start'。那些重叠的 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;
    }
}
...

这只是为了练习，我不会使用它，因为它会在谷歌第一次决定将 text-anchor 更改为其他内容或标签序列中的内容发生更改或有人决定将 2 个轴放在左侧时失败...

见example at jsbin

【讨论】：