web-dev-qa-db-fra.com

Comment changer la couleur du texte dans Highcharts

Cela devrait être assez simple, mais j’ai parcouru la documentation des tableaux d’affichage Highcharts et ne semble pas avoir trouvé d’option qui traite spécifiquement de la couleur du texte (en revanche, il existe des options de couleur spécifiques pour les fonds, les bordures, les lignes, etc.). Puis je suis tombé sur l’option chart.style . Il semble comme si cela devrait fonctionner - mais ne le fait pas.

Dans cette démo jsfiddle vous verrez que j’ai pu changer la famille de polices, mais pas la couleur. 

Qu'est-ce que je rate?

javascripthighcharts
11
benekastah

vérifier cet exemple , j’ai pu changer les couleurs des étiquettes sur votre jsfiddle. voici le paramètre entier d'options:

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'monospace',
            color: "#f00"
        }

    },
    title: {
      style: {
         color: '#F00',
         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
   },
    xAxis: {
      gridLineWidth: 1,
      lineColor: '#000',
      tickColor: '#000',
      labels: {
         style: {
            color: '#F00',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'

         }            
      }
   },
   yAxis: {
      minorTickInterval: 'auto',
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: '#000',
      labels: {
         style: {
            color: '#F00',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
         }            
      }
   },
});
36
maialithar

le style peut être appliqué à presque toutes les options des graphiques supérieurs, comme dans l'exemple suivant pour l'axe des y:

http://jsfiddle.net/h3azu/

Je recommanderais également d'aller sur cette page,

http://www.highcharts.com/demo/combo-dual-axes

et en cliquant sur "options d'affichage" pour avoir une idée des autres façons d'utiliser l'option "style" pour colorer le texte.

3
BananaNeil

En parcourant le fichier highcharts.src.js, vous pouvez attribuer un style aux éléments individuels. Par exemple, dans votre exemple, vous avez modifié le graphique en titre et la couleur est sélectionnée;

  title: {
    style: {
        fontFamily: 'monospace',
        color: "#f00"
    }
}
1
WooHoo