Google Charts: Tytuł tytułu na pozycji Pie Pozycja

Question

Zostałem przydzielony do wdrożenia niektórych Wykresów, a szefowie poprosili mnie o oddzielenie tytułu wykresu od Wykresu, próbowałem przesunąć obszar wykresu trochę od góry, ale tytuł przeniesiony z wykresu też tak:

próbowałem za pomocą: chartArea:{top:80} i wynik był taki, że na zrzucie ekranu. Jestem pewien, że właściwość przeniesienia tylko tytułu jest inna, ale nie mogę jej jeszcze znaleźć. btw, to całe moje obiektu:

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

góry dzięki :)

Answer 1

Nie sądzę, można to zrobić za pomocą opcji w VIS API.

Jednakże ....

Tytułowy jest utrzymywany w elemencie tekstu co X/Y położenia

Jeśli JQuery, staje się kawałek ciasta

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

Dodanie tego bezpośrednio po wywołaniu .draw i poprawieniu współrzędnych x i y zapewnia doskonałą kontrolę w pikselach.

Można zrobić to bez jQuery, ale czas nagli, a ja zostawiam to do kogoś innego :)

Answer 2

jak PerryW powiedział, że nie sądzę, że można to zrobić z danym API. Najłatwiej to zrobić, tworząc tabelę html z wykresem w drugim rzędzie.

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

Teraz możesz bawić się stylem i lokalizacją tyle, ile chcesz!

Answer 3

To zły kiedy Google dostarczyli pozycję napisów, ale z jQuery, można zrobić to

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

Zasadniczo chcesz uzyskać dostęp do pierwszego znacznika tekstu, który jest tytuł wykresu i zmień wartość atrybutu X. Aby wyśrodkować, weź szerokość svg (szerokość twojego wykresu) odejmuj przez tytuł widtch, a następnie dziel przez 2 :) Happy hacking :)