C'è un modo per dare stile alle descrizioni dei comandi nell'API del grafico di Google? Sono riuscito a cambiare solo il colore del testo usando tooltip.textStyle. Quindi non v'è alcuna soluzione per modificare lo sfondo biancoa qualche altro colore (come mostrato nella foto):Tooltipi per lo styling dell'API di Google chart
parco giochi prova http://jsfiddle.net/nyNAg/
ho trovato una soluzione attraverso la serendipità:
<style>
path {
fill: yellow;
}
</style>
In ogni caso, non ho trovato alcuna opzione di configurazione per lo sfondo in Google Charts API.
Come Google Strumenti grafico API implementa la sua SVG grafici tramite un iframe ospitato sui suoi server, come da Same Origin Policy non è possibile accedere o modificare il contenuto di un altro dominio, a meno che tramite la manipolazione lato server prima di inviare al client una risposta.
Detto questo, non sono sicuro di come sia riuscito a cambiare il colore del testo, forse un bug del browser?
C'è un'opzione di configurazione per il colore del testo "tooltip.textStyle" ma non per il colore di sfondo. Ho modificato SVG usando Firebug solo per mostrare cosa sto cercando di ottenere (e fatto uno screenshot). – vlgalik
Vedo il tuo link. Oltre a quelli offerti da Google di questo stile tramite l'API, non riesco a capire come ci sarebbe stato un modo per aggirare questo problema. – rutherford
È possibile sostituire completamente l'etichetta con HTML personalizzato. È forse un po 'complicato, ma ti dà il pieno controllo del contenuto e dello stile. Vedi https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
Un'altra opzione potrebbe essere l'override delle regole in linea, ad es.
li.google-visualization-tooltip-item span [stile] {font-weight: normal! Important; }
Attivare il tooltip ad essere gestita dal HTML scrivendo questo codice nelle opzioni di carte google CODICE: tooltip: { isHtml: true } (,) aggiungere una virgola, se necessario. :)
Ora è possibile modificare la descrizione dei comandi utilizzando HTML e css. :)
/stile CSS/
per lo stile casella tooltip:
div.google-visualization-tooltip {}
per lo stile del contenuto come dimensione, il colore, ecc
div.google-visualization-tooltip > ul > li > span {}
Usa !important ogni volta necessario;)
Ho modificato il selettore in modo che corrisponda solo al fumetto del tooltip http://jsfiddle.net/nyNAg/21/ – vlgalik
È possibile modificare lo sfondo del tooltip direttamente con 'var options = {}'? Ad esempio, per rendere trasparente un grafico, puoi impostare 'var options = {backgroundColor: {fill: 'transparent'}};' – Pathros