Style des infobulles dans google charts

Je voudrais savoir s'il est possible de changer la couleur de la police des info-bulles par défaut dans un graphique google line.Style des infobulles dans google charts

Je veux le faire en changeant le style css comme ceci:

<style> 

    .google-visualization-tooltip { 

      width: 150px !important; 
      border: none !important; 
      border-radius: 21px !important; 
      background-color: rgb(30, 50, 230)!important; 
      position: absolute !important; 
      box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75) !important; 
      background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      font-size: 10px !important; 

      } 


    </style>

Toutes ces lignes fonctionnent bien, mais css je n'ai pas trouvé la couleur de police jusqu'à présent param. Par ailleurs, si je modifie le paramètre "tooltip.textStyle" de Line Chart API, la couleur de la police change mais le code CSS mentionné ci-dessus devient inutilisable.

Merci!

Source

2014-04-25 J.Arranz

Je l'ai eu!

J'avais besoin d'insérer ces lignes dans l'étiquette de style.

div.google-visualization-tooltip > ul > li > span { 
color: #ff0000 !important;

Source

2014-05-08 16:02:00

En plus de la réponse donnée du même utilisateur qui a demandé ...

Vous devrez définir

tooltip: { isHtml: true }

les options graphiques pour le CSS pour travailler. Veuillez lire la documentation officielle de Google Maps: customizing tooltip content

Source

2015-01-19 15:16:14 Spyros

Résumez les réponses fournies par les personnes ci-dessus. :)

Activer l'infobulle à gérer par le code HTML en écrivant ce code dans vos options de Google Maps CODE: tooltip: { isHtml: true } (,) ajouter une virgule si nécessaire. :)

Maintenant vous pouvez styliser l'info-bulle en utilisant HTML et CSS. :)

/CSS Styling/

Pour le style de la boîte de infobulle:

div.google-visualization-tooltip {}

Pour le style du contenu, comme la taille de police, couleur, etc

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

Utilisez !important en cas de besoin;)

Source

2016-05-17 06:42:51 b0y

Il y a un fichier CSS chargé par la version actuelle des charts:

https://www.gstatic.com/charts/45.1/css/core/tooltip.css

Dans ce fichier, vous pouvez voir ce que les styles ont été écrits par les développeurs de Google et Ecrasez simplement avec votre propre. Ajouter! Important si ne fonctionne pas. Exemple:

.google-visualization-tooltip { 
    border:none !important; 
}

Et juste charger votre css personnalisé comme n'importe quel autre CSS.

Comment obtenir la version actuelle du fichier CSS?

Vous pouvez obtenir la version mise à jour dans l'onglet réseau de chrome. Ouvrez les outils de développement (par ex.faites un clic droit sur un objet html et sélectionnez "inspecter")

Source

2017-04-18 10:40:34

Style des infobulles dans google charts

Répondre

Questions connexes