2016-03-16 1 views
0

J'utilise un graphique à bulles pour montrer 2 points de données et tracer une ligne horizontale et verticale. Ce que je voudrais faire est de définir la couleur du titre à la même couleur que la ligne. Le titre se comporte comme une info-bulle pour la ligne.Définir la couleur du chemin du moteur de rendu highcharts titre

La ligne est tracée en utilisant la fonction suivante:

function drawLine(chart, line) 
{ 
    chart.renderer.path([ 
     "M", line.startX, line.startY, 
     "L", line.endX, line.endY 
    ]) 
    .css({ 
     color: line.color, 
     fill: line.color 
    }) 
    .attr({ 
     "stroke-width": 2, 
     stroke: line.color, 
     title: line.title || "", 
     color: line.color, 
     fill: line.color, 
     useHTML: true, 
     zIndex: 2 
    }) 
    .add(); 
} 

Je ne sais pas ce que je peux faire pour changer la couleur du texte du titre. Aucune suggestion?

Voir ce stylo pour le code: http://codepen.io/kdbruin/pen/EKNBor

+1

Titre dans ce cas, fait partie du navigateur/OS et de modifier la couleur et le style que vous pouvez utiliser quelque chose d'autre - comme un élément personnalisé montrant le passage de la souris/mouseenter. Vous pouvez ajouter votre info-bulle personnalisée à l'aide du moteur de rendu Highcharts. –

+0

J'ai essayé plusieurs des solutions "renderer with tooltip" trouvées ici mais aucune ne fonctionnait correctement car elles supposent toutes que l'info-bulle est pour un point de données. J'ai également essayé d'utiliser le moteur de rendu pour ajouter du texte sur mouseover et l'enlever à nouveau lors du passage au clavier, mais cela n'a pas fonctionné non plus (mais je n'ai pas complètement étudié pourquoi). Donc, toutes les suggestions sont les bienvenues. –

+0

Est-ce le titre du graphique dont vous voulez changer la couleur? –

Répondre

1

Titre dans ce cas, fait partie du navigateur/OS et de modifier la couleur et le style que vous pouvez utiliser quelque chose d'autre - comme un élément personnalisé montrant le passage de la souris/mouseenter. Vous pouvez ajouter votre text personnalisé en utilisant les graphiques renderer.

Exemple: http://codepen.io/anon/pen/zqNOyp

+1

Cela fonctionne comme un charme. Ce n'était pas comme toutes les solutions que j'ai trouvées. Merci! –