javascript Google Charts - 如何将轴标签换行成两行？（多个 X 轴）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14062420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Charts - How to line break axis label into two rows? (Multiple X Axes)
提问by Aust
I have my google line chart which looks something like this:
我有我的谷歌折线图，看起来像这样：
10| .
| .....----''' ''--.
09| .-----''''' ''-
| '.
08| \
| '.
07| '.
|________________________________________________________
2012/12/27 12:01 2012/12/26 12:22 2012/12/25 11:33
And I want it to look like this (notice the X-Axis label):
我希望它看起来像这样（注意 X 轴标签）：
10| .
| .....----''' ''-.
09| .-----''''' \
| '.
08| \
| '.
07| '.
|_______________________________________________
2012/12/27 2012/12/26 2012/12/25
12:01 12:22 11:33
I tried adding <br>, \n, and \rbut no luck.
我尝试添加<br>, \n,\r但没有运气。
I looked through the documentation and the closest thing I found was hAxis.maxTextLinesbut there is no minTextLinesoptions so I couldn't figure out how to force it. How can I do this?
我查看了文档，发现的最接近的东西是hAxis.maxTextLines但没有minTextLines选项，所以我无法弄清楚如何强制它。我怎样才能做到这一点？
UPDATE更新
It seems that this is possible when creating charts by linking to google. You just have to set the chxtvariable with extra x values (however many more x axes you need): chxt=y,x,x. And then for each x axis, you set what the labels will be with the chxlvariable. chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33
通过链接到谷歌来创建图表时，这似乎是可能的。你只需要设置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
For example:
例如：
But the way I am creating my charts is through JavaScript. This way:
但我创建图表的方式是通过 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}}
});
});
So I need to figure out a way how to do this using this format/API. How can I do it this way?
所以我需要想办法如何使用这种格式/API 来做到这一点。我怎么能这样做？
采纳答案by JSuar
Final Update
最终更新
Working Example:http://jsbin.com/eyokec/1/(edit version)
工作示例：http : //jsbin.com/eyokec/1/（编辑版本）
Well, as usual, some digging around yielded a few possible solutions. I was only successful at getting one to work but at least you know it's possible at this point. This answerfrom Insert Links into Google Charts api data?provided the working solution above.
好吧，像往常一样，一些挖掘产生了一些可能的解决方案。我只成功地让一个工作，但至少你知道在这一点上这是可能的。这个答案来自将链接插入 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);
}
});
The above code work but, understandably, is far from ideal. It's just a proof of concept that you can hopefully use. I saw other similar questions about updating SVG files but I couldn't get them to work. The above code might be able to update th SVG <text>nodes relying on <tspan>for multi-line support. I might try to get that to work at some point.
上面的代码可以工作，但可以理解的是，它远非理想。这只是您可以使用的概念证明。我看到了其他关于更新 SVG 文件的类似问题，但我无法让它们工作。上面的代码可能能够更新<text>依赖于<tspan>多行支持的SVG节点。我可能会尝试让它在某个时候发挥作用。
Tests
测试
- Chrome 23.0.1271.97 m: PASS
- Firefox 17.0.1: PASS (more height needed)
- IE9: FAIL (not sure why)
- 铬 23.0.1271.97 m：通过
- Firefox 17.0.1：通过（需要更多高度）
- IE9：失败（不知道为什么）
References
参考
- Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM
- http://raphaeljs.com/
- jQuery SVG: http://keith-wood.name/svg.html
- 使用 ECMAScript (Javascript) 和 DOM 操作 SVG 文档
- http://raphaeljs.com/
- jQuery SVG：http: //keith-wood.name/svg.html
Update 0
更新 0
Also, it appears that Google Image Charts API is now deprecated.
此外，似乎 Google Image Charts API 现在已被弃用。
Important: The Image Charts portion of Google Chart Tools has been officially deprecatedas of April 20, 2012. It will continue to work as per our deprecation policy.
重要提示：Google Chart Tools 的 Image Charts 部分已于2012 年 4 月 20 日正式弃用。它将继续按照我们的弃用政策运行。
So, although you can create the chart as an example of what you would like, it's possible that functionality was not brought over to Google Chart Tools.
因此，尽管您可以创建图表作为您想要的示例，但该功能可能没有被带到 Google 图表工具中。
That said, I did find this Chart Wizardthat will help create the necessary JavaScript to embed your chart with the Visualization API.
也就是说，我确实找到了这个图表向导，它将帮助创建必要的 JavaScript，以将您的图表嵌入到可视化 API 中。
Original
原来的
Doesn't appear possible.You could force it using hAxis.minTextSpacing. It works but that's certainly not the purpose of that configuration option. You could also pull the labels out and handle them via HTML, but I know that's not ideal either.
看来不可能。您可以使用hAxis.minTextSpacing强制它。它可以工作，但这肯定不是该配置选项的目的。您也可以拉出标签并通过 HTML 处理它们，但我知道这也不理想。
回答by Gordon
I used:
我用了：
hAxis: {format:'MMM dd, yyy \nHH:mm'}
hAxis: {format:'MMM dd, yyy \nHH:mm'}
in my options array and Google API formatted it as
在我的选项数组和 Google API 中将其格式化为
Mar 05, 2014
16:00
回答by Felipe Céspedes
Put a line break \nwhere needed
e.g.
\n在需要的地方换行，例如
var data = [
["Days", "Pressure"],
["Mon\n16", 20],
["Tue\n17", 16],
["Wen\n18", 10],
["Thr\n19", 16],
["Fri\n20", 17]
];
回答by Prathap Ram
Try to use "\\n" instead of "\n", its working fine to me.
尝试使用“\\n”而不是“\n”，它对我来说工作正常。
回答by lkraav
In our case, it was also PHP single- vs double-quotes:
在我们的例子中，它也是 PHP 单引号和双引号：
BAD date( 'Y\nM' )
坏的 date( 'Y\nM' )
BETTER date( "Y\nM" )
更好的 date( "Y\nM" )
