Google चार्ट एपीआई स्टाइल टूलटिप्स

Question

क्या Google चार्ट एपीआई में टूलटिप्स शैली का कोई तरीका है? मैंने केवल tooltip.textStyle का उपयोग कर टेक्स्ट का रंग बदलने में कामयाब रहा है।

टेस्ट खेल का मैदान http://jsfiddle.net/nyNAg/

Answer 1

मैं नसीब के माध्यम से एक समाधान मिल गया।

Answer 2

Google चार्ट उपकरण एपीआई के रूप में अपने एसवीजी लागू करता है: तो वहाँ कुछ अन्य रंग (जैसा कि चित्र में दिखाया गया) को सफेद पृष्ठभूमि बदलने के लिए किसी भी समाधान है Same Origin Policy के अनुसार, इसके सर्वर पर होस्ट किए गए आईफ्रेम के माध्यम से चार्ट आप क्लाइंट को प्रतिक्रिया भेजने से पहले सर्वर-साइड मैनिपुलेशन के माध्यम से, किसी अन्य डोमेन की सामग्री तक पहुंच या संशोधित नहीं कर सकते हैं।

यह देखते हुए कि, मुझे यकीन नहीं है कि आप टेक्स्ट रंग बदलने में कैसे कामयाब रहे - शायद एक ब्राउज़र बग?

<style> 
path { 
    fill: yellow; 
} 
</style> 

वैसे भी, मैं गूगल चार्ट एपीआई में पृष्ठभूमि के लिए किसी भी विन्यास विकल्प नहीं मिला:

Answer 3

कस्टम HTML के साथ लेबल को पूरी तरह से बदलना संभव है। यह शायद थोड़ा जटिल है, लेकिन आपको सामग्री और शैली का पूरा नियंत्रण देता है। https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

Answer 4

एक और विकल्प इनलाइन-शैली नियमों को ओवरराइड करना हो सकता है उदा।

li.google-visualization-tooltip-item span [style] {font-weight: सामान्य! महत्वपूर्ण; }

http://css-tricks.com/override-inline-styles-with-css/

Answer 5

टूलटिप सक्षम करें गूगल चार्ट के अपने विकल्पों में इस कोड लिख कर एचटीएमएल द्वारा नियंत्रित किया जा करने के लिए कोड: tooltip: { isHtml: true } (,) एक अल्पविराम अगर जरूरत जोड़ें। :)

अब आप एचटीएमएल और सीएसएस का उपयोग कर टूलटिप शैली कर सकते हैं। :)

/सीएसएस स्टाइलिंग/

टूलटिप बॉक्स शैली करने के लिए:

div.google-visualization-tooltip {} 

फ़ॉन्ट आकार, रंग की तरह सामग्री शैली के लिए, आदि

div.google-visualization-tooltip > ul > li > span {} 

उपयोग !important जब भी आवश्यक;)

http://jsfiddle.net/nyNAg/66/