Google圖表：折線圖hAxis標簽居中

Question

我正在使用Google圖表的折線圖，並將以下示例放在一起： http : //codepen.io/anon/pen/epJqaX

如您所見，所有數據點都有一個日期，一個值1和一個值2。

目前，我僅將以下代碼用於hAxis ：

hAxis: {
  format: 'MMMM',
  ticks: dateTicks,
}

現在， hAxis上的標簽始終位於垂直線的中心，但是我希望它們在相應月份的中心，如下圖所示：

我該怎么辦？

Answer 1

第一個答案（semirturgay）方向正確，但是存在一些嚴重問題：

• 它不起作用，至少應該包裝成一個ready事件
• 它不關心本地化。 例如，當我運行OP提供的代碼時，由於我位於丹麥，所以月份被翻譯為“ januar”，“ februar”等。 這不是明智的比較與谷歌的可視化本地化的格式化值硬編碼字符串，它就會失敗。
• 它正在使用jQuery

這是一個使用Google可視化自己的格式方法的有效解決方案，如果需要更改date格式（只需將DateFormat({pattern: 'MMMM'})更改為hAxis任何值，則該方法也很容易更改： format ）：

google.visualization.events.addListener(chart, 'ready', function() {
   var indent = 120,
       texts = document.querySelectorAll('text'),
       formatter = new google.visualization.DateFormat({pattern: 'MMMM'});

   function indentText(month) {
       for (var t=0;t<texts.length;t++) {
          if (texts[t].textContent == month) {
             texts[t].setAttribute('x', parseInt(texts[t].getAttribute('x'))+indent);
             return;
          }    
       }    
   }    
   for (var i=0;i<dateTicks.length;i++) {
       indentText(formatter.formatValue(dateTicks[i]));
   }          
})

已將代碼筆代碼移到小提琴-> http://jsfiddle.net/no4ztpuc/