Google 图表偏移水平轴标记标签

Question

有谁知道是否可以偏移标记，使它们出现在 google 图表的列之间？

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

api.

的默认行为不是标记直接与下面的列内联

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

谢谢

Answer 1

图表在包含 <g>、<rect>、<text>（和其他）元素的 <svg> 结构中呈现。图表与图表的结构差异很大，如果基本图表元素被省略，内部排序可以改变。水平轴元素呈现为类似

<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>

要了解在 <svg> 结构中查找这些 <text> 元素的位置，您可以将图表的呈现代码复制到能够设置代码样式的编辑器，或使用 online code beautifier。

然后使用 querySelector、querySelectorAll、getElementsByTagName 等 DOM 方法简单地遍历 <svg>

看到这个 google.visualization.ColumnChart ：

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

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/

这只是一个例子。您可能需要定位另一个包含 <text> 的 <g> 元素，以及如何操作 x 或 <text> 的其他属性取决于图表的布局。

Google 图表偏移水平轴标记标签

Google Charts offsetting the horizontal axis marker labels

charts

google-api

google-visualization