Google Charts：餅圖標題位置

我被分配執行一些圖表，並且老闆要求我將圖表的標題從圖表中分離出來，我嘗試將圖表的區域從頂部移開一點，但標題與圖表太感動，是這樣的：Google Charts：餅圖標題位置

before chartArea after chartArea

我嘗試使用：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));

感謝提前:)

來源

2013-04-29 Ruffo

我不認爲你可以通過在可見API選項做到這一點。

但是....

標題中使用X/Y定位

如果您正在使用JQuery，這將成爲小菜一碟

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

的文本元素召開在.draw調用之後立即添加，並調整x和y座標可以讓您完美控制像素。

你可以不用JQuery的，但時間緊迫，我會留給別人:)

來源

2013-04-30 02:21:23 PerryW

我忘了...必須jsfiddle http://jsfiddle.net/kentcoast/KLWgW/ – PerryW 2013-04-30 07:06:07

偉大的解決方案 - 易於工作到一個形式;） – 2013-05-09 12:41:02

一個問題是，在我的情況下，圖形的大小（和寬度）是響應。在這種情況下，X/Y定位可能會非常棘手，我寧願通過在Google Charts之上使用我自己的標題進行操作。 – 2017-10-17 15:27:56

爲PerryW說，我不認爲你可以用給定的API做到這一點。做到這一點的最簡單方法是在第二行用圖表製作一個html表格。

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

現在你可以使用樣式和位置玩，只要你想盡可能多的！

來源

2015-09-08 21:31:06

這是惱火，當谷歌沒有提供標題的位置，但與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 :) 快樂黑客:)

來源

2016-06-21 22:04:05 tkhuynh

Google Charts：餅圖標題位置

回答

相關問題