Google Charts - 如何将中断轴标签分为两行?(多个X轴)

Aus*_*ust 11 javascript svg line-breaks google-visualization

我有我的谷歌折线图,看起来像这样:

10|                        .
  |            .....----''' ''--.
09| .-----'''''                  ''-
  |                                 '.
08|                                   \
  |                                    '.
07|                                      '.
  |________________________________________________________
   2012/12/27 12:01    2012/12/26 12:22    2012/12/25 11:33
Run Code Online (Sandbox Code Playgroud)

我希望它看起来像这样(注意X轴标签):

10|                        .
  |            .....----''' ''-.
09| .-----'''''                 \
  |                              '.
08|                                \
  |                                 '.
07|                                   '.
  |_______________________________________________
   2012/12/27          2012/12/26       2012/12/25
   12:01               12:22            11:33
Run Code Online (Sandbox Code Playgroud)

我尝试添加<br>,\n\r但没有运气.

我查看了文档,我找到的最接近的东西hAxis.maxTextLines是没有minTextLines选项,所以我无法弄清楚如何强制它.我怎样才能做到这一点?


UPDATE

通过链接到谷歌创建图表似乎是可能的.你只需要设置的chxt变量有额外的x值(但更多的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反馈网站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}}
               });
});
Run Code Online (Sandbox Code Playgroud)

所以我需要找到一种使用这种格式/ API的方法.我怎么能这样做?

JSu*_*uar 7

最后更新

工作示例: http ://jsbin.com/eyokec/1/(编辑版)

好吧,像往常一样,一些挖掘产生了一些可能的解决方案.我只是成功地让一个人上班,但至少你知道这是可能的.这个答案来自插入链接到Google Charts 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);
      }
  });
Run Code Online (Sandbox Code Playgroud)

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

测试

  • Chrome 23.0.1271.97 m:通过
  • Firefox 17.0.1:PASS(需要更多高度)
  • IE9:失败(不知道为什么)

参考


更新0

此外,Google Image Charts API似乎已被弃用.

重要提示:截至2012年4月20日,Google图表工具的图片图表部分已正式弃用.它将继续按照我们的弃用政策运作.

因此,虽然您可以创建图表作为您想要的示例,但可能没有将功能带到Google Chart Tools.

也就是说,我确实找到了这个图表向导,它将帮助创建必要的JavaScript以使用Visualization API嵌入您的图表.

Google Chart图像示例


原版的

似乎不可能.您可以使用hAxis.minTextSpacing强制它.它工作但但肯定不是该配置选项的目的.您也可以拉出标签并通过HTML处理它们,但我知道这也不理想.


小智 7

我用了:

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

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

Mar 05, 2014
   16:00
Run Code Online (Sandbox Code Playgroud)

  • 非常适合连续X轴(日期,数字......),但不适合离散X轴(字符串)图表,就像我的图表一样.:( (2认同)