javascript - 谷歌图表 : Line Chart hAxis Labels centered

Question

我正在使用 Google Charts 的折线图并将以下示例放在一起:http://codepen.io/anon/pen/epJqaX

如您所见，所有数据点都有日期、值 1 和值 2。

目前我只将此代码用于hAxis:

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

现在 hAxis 上的标签总是在垂直线下方居中，但我希望它们在相应的月份居中，如下图所示:

我该怎么做？

Answer 1

第一个答案(semirturgay)是在正确的方向，但是有一些严重的问题:

• 这行不通，至少应该包装成一个ready事件
• 它不负责本地化。例如，当我运行 OP 提供的代码时，月份被翻译为“januar”、“februar”等，因为我位于丹麦。将硬编码字符串与谷歌可视化本地化格式化值进行比较是不明智的，它将失败。
• 它正在使用 jQuery

这是一个使用谷歌可视化自己的格式方法的工作 Vanilla 解决方案，如果 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]));
   }          
})

已将 codepen 代码移至 fiddle -> http://jsfiddle.net/no4ztpuc/