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
选项,所以我无法弄清楚如何强制它.我怎样才能做到这一点?
通过链接到谷歌创建图表似乎是可能的.你只需要设置的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
例如:
但我创建图表的方式是通过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的方法.我怎么能这样做?
工作示例: 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 节点.我可能会试着让它在某个时候起作用.
此外,Google Image Charts API似乎已被弃用.
因此,虽然您可以创建图表作为您想要的示例,但可能没有将功能带到Google Chart Tools.
也就是说,我确实找到了这个图表向导,它将帮助创建必要的JavaScript以使用Visualization API嵌入您的图表.
似乎不可能.您可以使用hAxis.minTextSpacing强制它.它工作但但肯定不是该配置选项的目的.您也可以拉出标签并通过HTML处理它们,但我知道这也不理想.
小智 7
我用了:
hAxis:{格式:'MMM dd,yyy \nHH:mm'}
在我的选项数组和Google API中将其格式化为
Mar 05, 2014
16:00
Run Code Online (Sandbox Code Playgroud)