Javascript 添加2个以上时,Google折线图v轴重叠

Javascript 添加2个以上时,Google折线图v轴重叠,javascript,google-visualization,linechart,Javascript,Google Visualization,Linechart,在Google折线图中添加两个以上的v轴会使右侧的重叠。 使用样本代码功能进行重新编程 示例代码: function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'Cats'); data.a

在Google折线图中添加两个以上的v轴会使右侧的重叠。 使用样本代码功能进行重新编程

示例代码:

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'
。在这种情况下,你得到的数字是不重叠的

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

0,40
x轴下方的轴标签具有属性文本锚定“中间”,图表左侧的标签具有值“结束”,右侧的标签和图例标记具有值“开始”。重叠部分的x值相同,y值不同。因此,其中一半必须向右移动(x值已更改):

。。。
var labels=document.querySelectorAll('text[text-anchor=start]');
//求相同x的极限
var xMin=-1,xMax=-1;
对于(变量i=1;i对于(var i=xMin+(xMax-xMin+1)/2、 一种可能是使用
textPosition:'out'
作为一个轴,使用
textPosition:'in'
作为另一个轴。这不是最好的一个,但至少数字没有重叠。图表支持的变量不超过两个
vax
非常好,你唯一的实际选择就是按照@Anto Jurković所说的做。你可以提交一份改进文件ed支持2个以上的
VAX
<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>
...
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;
    }
}
...