javascript Google Charts：饼图标题位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16282210/
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: Pie Chart title position
提问by Ruffo
I was assigned to implement some Charts, and the bosses requested me to separate the title of the chart from the Chart, I tried to move the chart's area a little from the top, but the title moved with the chart too, like this:
我被指派做一些图表，老板要求我把图表的标题和图表分开，我试图将图表的区域从顶部移动一点，但标题也随着图表移动，如下所示：
I tried using: chartArea:{top:80}and the result was that, on the screenshot. I'm sure the property to move only the title it's another but I can't find it yet. btw, This is my whole Object:
我尝试使用：chartArea:{top:80}结果是，在屏幕截图上。我确定该属性只移动标题它是另一个但我找不到它。顺便说一句，这是我的整个对象：
var columnChartProps = {
fontName: 'HelveticaNeueBC',
legend: {position: 'none'},
titleTextStyle: {fontSize: 18},
hAxis: {color: '#121b2d'},
vAxis: {
gridlines: {color: '#666666'}
},
width: 400,
height: 300,
backgroundColor: '#CBCBCB',
chartArea:{top:80, width:"80%"}
}
// VENCIMIENTOS:
var vencData = google.visualization.arrayToDataTable([
['equis', 'Vencimientos'],
['ENE', 7],
['FEB', 10],
['MAR', 5],
['ABR', 6],
['MAY', 10],
['JUN', 15]
]);
var vencOptions = {
colors:['#24375e','#2c4370','#324a7c','#38538a','#3e5b96','#4363a3'],
title: 'Vencimientos prox. 6 meses',
hAxis: {title: 'Meses'}
};
var vencimientos = new google.visualization.ColumnChart(document.getElementById('vencimientos'));
vencimientos.draw(vencData, jQuery.extend({},vencOptions,columnChartProps));
Thanks in advance :)
提前致谢 ：）
回答by PerryW
I don't think you can do this through options in the vis api.
我认为你不能通过 vis api 中的选项来做到这一点。
However....
然而....
The title is held in a text element that uses x/y positioning
标题保存在使用 x/y 定位的文本元素中
If you are using JQuery, this becomes a piece of cake
如果您使用的是 JQuery，这将成为小菜一碟
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
Adding that immediately after the .draw call and tweaking the x and y coords gives you pixel-perfect control.
在 .draw 调用后立即添加并调整 x 和 y 坐标可为您提供完美的像素控制。
You can do it without JQuery, but time is pressing and I'll leave that to someone else :)
你可以在没有 JQuery 的情况下完成，但时间紧迫，我会把它留给其他人:)
回答by Danny Harding
as PerryW said, I don't think you can do this with the given API. The easiest way to do this would be to make an html table with the chart on the second row.
正如 PerryW 所说，我认为您无法使用给定的 API 做到这一点。最简单的方法是制作一个带有第二行图表的 html 表格。
<table>
<thead>
<th>Vencimientos prox. 6 meses</th>
</thead>
<tbody>
<td>
***YOUR CHART HERE***
</td>
</tbody>
</table>
Now you can play around with the style and location as much as you want!
现在，您可以随心所欲地玩弄风格和位置！
回答by tkhuynh
It's annoyed when Google did provide title position but with jQuery, you can do it
当谷歌确实提供标题位置时很生气，但使用jQuery，你可以做到
$("#YOUR_GRAPH_WRAPPER svg text").first()
.attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));
Basically, you want to access the first text tag which is your chart title and change value of x attribute. To center it, take svg width (your graph width) subtract by title widtch, then divide by 2 :) Happy hacking :)
基本上，您想访问第一个文本标签，即您的图表标题并更改 x 属性的值。要将其居中，将 svg 宽度（您的图形宽度）减去标题窗口，然后除以 2 :) 快乐黑客:)
