Javascript 谷歌图表-如何将轴标签分为两行？（多个X轴）

我的谷歌折线图如下：

10|                        .
  |            .....----''' ''--.
09| .-----'''''                  ''-
  |                                 '.
08|                                   \
  |                                    '.
07|                                      '.
  |________________________________________________________
   2012/12/27 12:01    2012/12/26 12:22    2012/12/25 11:33

我希望它看起来像这样（注意X轴标签）：

我尝试添加

，

\n

和

\r

，但没有成功

我查看了文档，找到的最接近的东西是

hAxis.maxtlines

，但是没有

minTextLines

选项，因此我无法找出如何强制执行它。我该怎么做

---

更新

通过链接到谷歌创建图表时，这似乎是可能的。您只需使用额外的x值设置

chxt

变量（需要更多的x轴）：

chxt=y，x，x

。然后，对于每个x轴，使用

chxl

变量设置标签<代码>chxl=1:| 2012/12/27 | 2012/12/26 | 2012/12/25 | 2:| 12:01 | 12:22 | 11:33

例如：

但我创建图表的方式是通过JavaScript。这样：

google.setOnLoadCallback(function(){
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Count');

  //Populate data

  new google.visualization.LineChart(document.getElementById('chart')).
    draw(data, {curveType: 'function',
                chartArea: {left: 70, top: 50, width: '100%', height: '85%'},
                width: 950, height: 800,
                interpolateNulls: true,
                pointSize: 5,
                legend: {position: 'none'},
                vAxis: {title: 'Count', viewWindow: {min: 7, max: 10}},
                hAxis: {title: 'Date', viewWindow: {min: 0, max: 3}}
               });
});

因此，我需要找出一种方法，如何使用这种格式/API实现这一点。我怎样才能这样做？

最终更新 工作示例：（）

好吧，像往常一样，一些挖掘工作产生了一些可能的解决方案。我只是成功地让一个开始工作，但至少你知道这是可能的。从上面提供的工作解决方案

  // Note: You will probably need to tweak these deltas
  // for your labels to position nicely.
  var xDelta = 35;
  var yDelta = 13;
  var years = ['2012/12/27|12:01','2012/12/26|12:22','2012/12/25|11:33','2012/12/24|11:33'];
  $('text').each(function(i, el) {
      if (years.indexOf(el.textContent) != -1) {
          var g = el.parentNode;
          var x = el.getAttribute('x');
          var y = el.getAttribute('y');
          var width = el.getAttribute('width') || 70;
          var height = el.getAttribute('height') || 35;
  
          // A "ForeignObject" tag is how you can inject HTML into an SVG document.
         var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
          fo.setAttribute('x', x - xDelta);
          fo.setAttribute('y', y - yDelta);
          fo.setAttribute('height', height);
          fo.setAttribute('width', width);

          var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
          var p = document.createElement("P");

          p.setAttribute("style", "font-size:.8em; font-family:Arial;text-align:center;color:#555;");
          p.innerHTML = el.textContent.replace('|','<br />');

          body.appendChild(p);
          fo.appendChild(body);
  
          // Remove the original SVG text and replace it with the HTML.
          g.removeChild(el);
          g.appendChild(fo);
      }
  });

//注意：您可能需要调整这些增量
//让您的标签定位准确。
var xDelta=35；
var yDelta=13；
风险值年数=['2012/12/27 | 12:01'、'2012/12/26 | 12:22'、'2012/12/25 | 11:33'、'2012/12/24 | 11:33'；
$（'text'）。每个（函数（i，el）{
如果（年份索引of（el.textContent）！=-1）{
var g=el.parentNode；
var x=el.getAttribute（'x'）；
变量y=el.getAttribute（'y'）；
var width=el.getAttribute（'width'）|| 70；
var height=el.getAttribute（'height'）|| 35；
//“ForeignObject”标记是将HTML插入SVG文档的方式。
var fo=document.createElements（“http://www.w3.org/2000/svg“，”外国物体“）；
set属性（'x'，x-xDelta）；
fo.setAttribute（'y'，y-yDelta）；
fo.setAttribute（'height'，height）；
fo.setAttribute（'width'，width）；
var body=document.createElements（“http://www.w3.org/1999/xhtml“，”主体“）；
var p=document.createElement（“p”）；
p、 setAttribute（“样式”，“字体大小：.8em；字体系列：Arial；文本对齐：居中；颜色：#555；”）；
p、 innerHTML=el.textContent.replace（“|”和“
”）；
体感儿童（p）；
fo.儿童（身体）；
//删除原始SVG文本并将其替换为HTML。
g、 离体（el）；
g、 儿童（fo）；
}
});

上面的代码可以工作，但是，可以理解，远不是理想的。这只是一个概念的证明，希望你能使用它。我看到了关于更新SVG文件的其他类似问题，但我无法让它们正常工作。上述代码可能能够更新SVG

节点，这些节点依赖于多行支持。我可能会尝试在某个时候让它起作用

测验

• 铬23.0.1271.97米：合格
• Firefox 17.0.1：通过（需要更多高度）
• IE9：失败（不确定原因）

工具书类

• jQuery SVG：

---

更新0 此外，谷歌图像图表API现在似乎已被弃用

重要提示：谷歌图表工具的图像图表部分已于2012年4月20日发布。它将继续按照我们的计划工作

因此，尽管您可以创建图表作为您想要的示例，但有可能Google图表工具没有提供功能

也就是说，我确实发现这将有助于创建必要的JavaScript，以便将图表嵌入可视化API

---

起初的 似乎不可能。你可以强迫它使用。它可以工作，但这肯定不是配置选项的目的，但我知道这也不理想。

我用过：

hAxis:{格式：'mmmdd，yyy\nHH:mm'}

在我的选项数组中，Google API将其格式化为

Mar 05, 2014
   16:00

---

在需要的地方放置换行符

\n

e、 g

---

尝试使用“\\n”而不是“\n”，这对我来说很好。

在我们的例子中，它也是PHP单引号对双引号：

错误的

日期（'Y\nM'）

---

更好的

date（“Y\nM”）

@JSuar-你肯定赢得了赏金，但我仍在尝试实施你的解决方案。我听到了。这不是最好的解决办法。重复的x轴数据也可以折叠成一个数组，这样就不必存储两次。上面的解决方案有帮助吗？如果是这样，我可以更新我的答案。是的。继续更新你的答案，我会接受。更新答案。我很高兴我能帮你找到解决方案。为什么这不是最受欢迎的答案！？简而言之，在需要的地方添加换行符。非常适合连续X轴（日期、数字…），但不适合离散X轴（字符串）图表，如我的图表：（是的，这应该是在轴标签中添加多条线的解决方案。谢谢！

Mar 05, 2014
   16:00

var data = [
    ["Days", "Pressure"],
    ["Mon\n16", 20],
    ["Tue\n17", 16],
    ["Wen\n18", 10],
    ["Thr\n19", 16],
    ["Fri\n20", 17]
];