Google图表：饼图标题位置

Question

我被指派实现一些图表，老板要求我将图表的标题与图表分开，我试着将图表区域从顶部移动一点，但是标题也随着图表一起移动，就像这样： 我尝试使用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));

感谢您的提前帮助 :)

- Ruffo

Answer 1

我认为你无法通过vis api中的选项来实现这一点。

然而...

标题保存在使用x/y定位的文本元素中

如果你使用JQuery，这将变得非常简单

$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})

在.draw调用之后立即添加并调整x和y坐标，可以使您获得像素级的控制。

你可以不使用JQuery来完成这个任务，但时间紧迫，我会把它留给其他人 :)

- PerryW

---

一个问题是，在我的情况下，图表的大小（以及宽度）是响应式的。在这种情况下，x/y定位可能会很棘手，我宁愿使用自己的标题来代替Google Charts。 - Csaba Toth

Answer 2

正如PerryW所说，我认为您不能使用给定的API来实现这一点。最简单的方式是制作一个带有图表的HTML表格，并将其放在第二行。

<table>
    <thead>
        <th>Vencimientos prox. 6 meses</th>
    </thead>
    <tbody>
        <td>
            ***YOUR CHART HERE***
        </td>
    </tbody>
</table>

现在您可以尽情调整样式和位置！

- Danny Harding

Answer 3

当谷歌没有提供标题位置时，这会让人感到烦恼，但是使用jQuery，您可以实现它。

$("#YOUR_GRAPH_WRAPPER svg text").first()
 .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));

基本上，您想要访问第一个文本标记，即您的图表标题，并更改x属性的值。为了使其居中，取svg宽度（您的图形宽度）减去标题宽度，然后除以2 :) 祝愉快编程 :)

- tkhuynh