谷歌图表：饼图标题位置(Google Charts: Pie Chart title positio

我被分配到实现一些图表，老板要求我单独从图表图表的标题，我试着一点点从顶端移到图表的区域，但标题与图表感动过，就像这样：

我试着使用： 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));

提前致谢 ：）

Answer 1:

我不认为你可以通过在可见API选项做到这一点。

然而....

该标题在使用X / Y定位的文本元素保持

如果您正在使用JQuery，这将成为小菜一碟

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

并称，.draw呼叫和调整x和y COORDS后立即给你完美的像素控制。

你可以不用JQuery的，但时间紧迫，我会留给别人:)

Answer 2:

作为PerryW说，我不认为你可以用给定的API做到这一点。 要做到这一点最简单的方法是使一个HTML表第二行的图。

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

现在，你可以玩的风格和位置，只要你想尽可能多的！

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宽度（您的图形宽度）的标题widtch减，然后用2 :)快乐黑客划分:)

文章来源: Google Charts: Pie Chart title position