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

Question

是否有人知道是否有可能抵消标记，以便它们出现在Google图表的列之间？

所以它看起来像这个设计样机......

而不是标记直接与下面的列内联，这是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>元素的位置，您可以将图表的呈现代码复制到能够设置代码样式的编辑器，或者使用{{3 }}。

然后使用DOM方法（例如<svg>，querySelector，getElementsByTagName等）遍历querySelectorAll。

请参阅此google.visualization.ColumnChart：

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

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);       
  }    
}

演示 - ＆gt;的 online code beautifier

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