Google Charts - 如何将断轴标签分成两行？（多个 X 轴）答案

【问题标题】：Google Charts - How to line break axis label into two rows? (Multiple X Axes)Google Charts - 如何将断轴标签分成两行？（多个 X 轴）
【发布时间】：2012-12-13 07:12:30
【问题描述】：

我的谷歌折线图看起来像这样：

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

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

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

我尝试添加<br>、\n 和\r，但没有成功。

我查看了文档，发现最接近的是hAxis.maxTextLines，但没有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

例如：

http://chart.apis.google.com/chart?chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33&chxr=0,7,10&chxt=y,x,x&chs=360x240&cht=bvg&chco=000000&chd=t1:9,10,7&cht=lc&chds=7,10

但我创建图表的方式是通过 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 做到这一点。我该怎么做？

【问题讨论】：

@JSuar - 你肯定赢得了赏金，但我仍在努力实施你的解决方案。
我听到了。这不是最好的解决方案。 Here's a cleaned up version using your code above。重复的 x 轴数据也可以折叠成一个数组，因此您不必存储两次。
我上面的解决方案有帮助吗？如果是这样，我可以更新我的答案。
是的。继续更新你的答案，我会接受的。
答案已更新。很高兴能够帮助您找到解决方案。

标签： javascript svg line-breaks google-visualization

【解决方案1】：

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

糟糕date( 'Y\nM' )

更好date( "Y\nM" )

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

在需要的地方添加换行符\n 例如

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

Result example

【讨论】：

【解决方案4】：

我用过：

hAxis: {format:'MMM dd, yyy \nHH:mm'}

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

Mar 05, 2014
   16:00

【讨论】：

为什么这不是投票最多的答案！？简单明了，在需要的地方添加换行符。
非常适合连续 X 轴（日期、数字...），但不适合离散 X 轴（字符串）图表，例如我的图表。 :(
是的，这应该是在轴标签中添加多行的解决方案。谢谢！

【解决方案5】：

最终更新

工作示例： http://jsbin.com/eyokec/1/ (edit version)

嗯，像往常一样，一些挖掘产生了一些可能的解决方案。我只是成功地让一个人工作，但至少你知道在这一点上是可能的。来自Insert Links into Google Charts api data? 的This answer 提供了上述工作解决方案。

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

上面的代码可以工作，但可以理解的是，它远非理想。这只是您可以使用的概念证明。我看到了其他关于更新 SVG 文件的类似问题，但我无法让它们工作。上面的代码可能能够更新依赖 <tspan> 的 SVG <text> 节点以获得多行支持。我可能会尝试在某个时候让它发挥作用。

测试

铬 23.0.1271.97 m：通过
Firefox 17.0.1：通过（需要更高的高度）
IE9：失败（不知道为什么）

参考文献

更新 0

此外，Google Image Charts API 现在似乎已被弃用。

重要提示：自 2012 年 4 月 20 日起，Google 图表工具的图像图表部分为 officially deprecated。它将继续按照我们的 deprecation policy 工作。

因此，尽管您可以创建图表作为您想要的示例，但功能可能未引入 Google 图表工具。

也就是说，我确实找到了这个Chart Wizard，它将帮助创建必要的 JavaScript 以将您的图表嵌入到 Visualization API。

原创

~~似乎不可能。~~你可以使用hAxis.minTextSpacing强制它。它可以工作，但这肯定不是该配置选项的目的。 You could also pull the labels out and handle them via HTML，但我知道这也不理想。

【讨论】：