2013-04-29 22 views
5

Bazı Grafiklerin uygulanması için görevlendirildim ve patronlar grafiğin başlığını Grafik'ten ayırmamı istedi, grafik alanını en üste taşımaya çalıştım, ancak başlık böyle de grafikle taşındı: Google Grafikler: Pasta Grafiği başlık pozisyonu

before chartAreaafter chartArea

kullanıyorum çalıştı: chartArea:{top:80} ve sonuç ekran üzerinde, olmasıydı. Eminim sadece bir başkasını taşıyacağına eminim ama henüz bulamıyorum. peşin

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

Teşekkür :) Sana vis API seçenekler arasında yapabilirsiniz sanmıyorum

cevap

17

: btw Bu benim bütün nesne olduğunu. Ancak

....

başlıktaki x/y konumlandırma

Eğer JQuery kullanarak, bu kek

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

bir parça haline gelir kullanan bir metin elemanının içinde tutulur

.draw'i çağırdıktan ve x ve y koordelerini değiştirdikten hemen sonra eklediğinizde piksel mükemmel kontrol sağlanır.

Sen JQuery olmadan bunu yapabilir, ama zaman acil ve ben başkasıyla :) perryw söylediği gibi

+2

Unuttuğum jsfiddle http://jsfiddle.net/kentcoast/ – PerryW

+0

harika çözüm - bir formda çalışmak kolay;) –

+0

Sorunlardan biri, benim durumumda, grafiğin boyutunun (ve genişliğinin) yanıt vermesidir. Bu durumda, bir x/y konumlandırma zor olabilir ve kendi başlığımı kullanarak Google Grafikler üzerinde ilerlemeyi tercih ederim. –

3

, sana verilen API ile yapabilirsiniz sanmıyorum o bırakacağım. Bunu yapmanın en kolay yolu, ikinci satırdaki grafikle bir html tablosu yapmak olabilir.

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

Artık stil ve konum ile istediğiniz kadar oynayabilirsiniz!

0

hakkında başlık konumunu sağlamak yaptı zaman rahatsız ama jQuery ile, bunun

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

Temel olarak, grafiğiniz başlık x özelliğinin değişim değeridir ilk metin etiketini erişmek istediğiniz yapabilirsiniz. Ortalamak için, svg genişliğini (grafik genişliğinizi) çıkartın, başlık widtch'ini al, sonra 2'ye böl. :)

İlgili konular