Google Charts：餅圖標題位置

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));

提前致謝 ：）

Answer 1

我不認為你可以通過vis api中的選項來做到這一點。

然而....

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

如果您使用的是JQuery，這將變得輕而易舉

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

在.draw調用之后立即添加，並調整x和y坐標，可以實現像素完美控制。

你可以在沒有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 :)快樂黑客:)