charts - 谷歌图表偏移水平轴标记标签

Question

有谁知道是否可以抵消标记，使它们出现在谷歌图表的列之间？

所以它看起来像这个设计模型......



而不是标记直接与下面的列内联，这是 google.visualization.ColumnChart api 的默认行为。



我搜索了文档，但是找不到任何对允许这种自定义的选项的引用。有谁知道是否有一种方法可以在渲染后操纵布局？或者，如果实际上有一个选项可以做到这一点，但我只是忽略了它？

谢谢

Answer 1

图表以 <svg> 呈现包含 <g> 的结构, <rect> , <text> (和其他)元素。图表与图表的结构有很大不同，如果省略基本图表元素，内部顺序可能会发生变化。水平轴元素呈现为类似

<text text-anchor="middle" x="468.46875" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">12</text>

想知道在哪里可以找到那些 <text> <svg> 中的元素您可以将图表的渲染代码复制到能够设置代码样式的编辑器，或使用 online code beautifier .

然后简单地遍历 <svg>通过使用 DOM 方法，例如 querySelector , querySelectorAll , getElementsByTagName 等。

看到这个 google.visualization.ColumnChart :


通过更改 x每个 <text>的属性属于水平轴的元素，我们可以让标 checkout 现在列之间:

google.visualization.events.addListener(chart, 'ready', updateAxis);    

function updateAxis() {
  var x,
      svg = document.getElementById('chart').querySelector('svg'),
      g = svg.querySelectorAll('g'),
      chartArea = g[3].querySelectorAll('g'),
      hAxisTexts = chartArea[5].querySelectorAll('text');

  //0-15 labels, the rest belongs to the yAxis
  for (var i=0;i<16;i++) {
    x = parseFloat(hAxisTexts[i].getAttribute('x'));
    if (x>9) {
      x = x-15;
    } else {
      x = x-18;
    }     
    hAxisTexts[i].setAttribute('x', x);       
  }    
}

演示 -> http://jsfiddle.net/hrrL45oq/

这只是一个例子。您可能需要针对不同的 <g>元素持有 <text>的，以及您如何操作 x或 <text> 的其他属性取决于图表的布局。