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

感謝:)私はあなたがVIS APIのオプションを介してこれを行うことができるとは思わない

Answer 1

：ところで、これは私の全体のオブジェクトがあります。しかしながら

....

タイトルはあなたがjQueryのを使用している場合、これはケーキ

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

の一片となるX/Y位置決め

を使用するテキスト要素に保持されています.draw呼び出しの直後にそれを追加し、xとyの座標を微調整すると、ピクセルの完全な制御が得られます。

あなたはjQueryのせずにそれを行うことができますが、時間が押しているとPerryWは、私はあなたが与えられたAPIでこれを行うことができるとは思わない、言ったように私は他の誰か:)

Answer 2

にそれを残しておきます。これを行う最も簡単な方法は、2行目のチャートを持つhtmlテーブルを作成することです。

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

これで、あなたは好みのスタイルと場所で遊ぶことができます。

Answer 3

Googleはタイトルの位置を提供したとき、それはイライラですが、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で割ります。 ハッピーハッキング:)