Google चार्ट: पाई चार्ट शीर्षक स्थिति

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

मुझे नहीं लगता कि आप की तुलना में एपीआई में विकल्पों के माध्यम से यह कर सकते हैं करते हैं: Btw, यह मेरे पूरे वस्तु है।

हालांकि ....

शीर्षक का उपयोग करता है x/y स्थिति

आप JQuery का उपयोग कर रहे हैं, तो इस केक

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

का एक टुकड़ा हो जाता है एक पाठ तत्व में आयोजित किया जाता है .draw कॉल के तुरंत बाद इसे जोड़ना और एक्स और वाई कॉर्ड को ट्वीक करना आपको पिक्सेल-सही नियंत्रण देता है।

आप JQuery के बिना यह कर सकते हैं, लेकिन समय के अहम है और मैं किसी और :)

Answer 2

रूप PerryW ने कहा, मुझे नहीं लगता कि आप दिए गए एपीआई साथ ऐसा कर सकते हैं करने के लिए है कि छोड़ देंगे। ऐसा करने का सबसे आसान तरीका चार्ट के साथ दूसरी पंक्ति पर एक 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)); 

मूल रूप से, आप पहली बार पाठ टैग जो आपके चार्ट शीर्षक और एक्स विशेषता के परिवर्तन मूल्य है उपयोग करना चाहते कर सकते हैं। इसे केन्द्रित करने के लिए, शीर्षक चौड़ाई द्वारा एसवीजी चौड़ाई (अपनी ग्राफ चौड़ाई) घटाएं, फिर 2 से विभाजित करें :) हैप्पी हैकिंग :)