Mto Villarzel Suisse

Impacts de foudre
Ephéméride - PDA Prévisions Alertes - Dangers Température Pression - Humidité Solaire et UV Rayonnement solaire Pluviométrie Vent Agriculture Chauffage Danger feux de forêt Info station Activité sismique Astronomie Divers / Liens / Explications Créations / GW / Tutoriels Evénement météo

Hors météo Broye Mon étang Consommation électrique Pompe à chaleur Panneaux solaire Serre

Livre d'Or

Forum Highcharts

Privé

Version pour mobile




Merci à nos donateurs:
M. Blanc
M. JavierMartinez
M. Viktor
M. Emanuel Roggen
M. Raphaël Chochon
M. José Luis Sanchez
M. Daniel Stuyck
M. Jean-Pierre Tonnele
M. Benoist Lerouge
M. Pierre Sabatier

M. Patrick Ollivier
M. Michel Le Viol
M. César López
M. Didier Mestric
M. Francesco Paolo Trapani
M. Charles Durand
M. Philippe Blanchard
M. Benjamin Leblic
Philippe Dupertuys
M. Jaume Mas Ferrer
M. Daniel Lavocat
M. Jean-Pierre Bernard
M.Gérard Egger
M. Jean-Claude Birade
M. Dominique Herraire
M. Eric Lemoine
M. Jean Gabriel Boulet
M. Olivier Bovel
M. Arnaud Rahier
M. Bruno Goyac
M. Jean Michel Vouillot
M. Sarah Cordeau
M. Jean-Pierre Grieu
M. Loic Roulin
M. Michel Beel
M. Dominique Gautheron
M. Hubert Verwilghen
Picardie WebMarketing
M. Patrick Puydebois
M. Thierry Hauuy
M. Francis Mirante


 

Visiteurs depuis le 07.01.2010

 

 

Visites du jour :

 

 

Service Cron Gratuit

 

Tutoriel HighCharts

Tutoriel MySQL - Highcharts

Personnalisation des graphiques avec l'API de Highcharts

Je vais vous expliquer comment utiliser les API de Highcharts.

Imaginons que nous voulons mettre un fond en couleur sur notre graphique "température"
Rendez-vous sur la page des références de l'API Highcharts http://api.highcharts.com/highcharts
Dans la fenêtre de recherche, tapez un mot clé, par exemple color ou background pour fond.
Dans la fenêtre de résultat, cliquez sur chart.plotBackgroundColor, c'est en anglais, mais quand même facilement compréhensible.
API HighCharts
Dans la fenêtre de droite, les options disponibles s'affichent, choisissez entre color (couleur unie) ou gradient (dégradé)
soyons fou et choisissons un dégradé. Cliquez donc sur gradient.
Une nouvelle fenêtre s'ouvre dans votre navigateur, sur le site http://jsfiddle.net, vous pouvez tester toutes les options de Highcharts, voici comment.
api HighCharts
Dans le code, on retrouve notre option "plotBackgroundColor"
plotBackgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
Essayez de modifier les valeurs en vert ci-dessus et en actualisant avec le bouton "Run" vous verrez le résultat dans le cadre de droite.
Par exemple, je change la couleur de départ qui est [0, 'rgb(255, 255, 255)'], en [0, 'rgb(120, 240, 60)'], et je fais Run
Résultat, la première couleur est passée du blanc au vert clair
Tutoriel HighCharts
Maintenant il suffit d'insérer ce code dans notre fichier, comme ceci
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'spline',
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: [0, 0, 300, 300],
stops: [
[0, 'rgb(120, 240, 60)'],
[1, 'rgb(200, 200, 255)']
]
}

},

ATTENTION de bien fermer tous les crochets [ ], les parenthèses ( ) , les accolades { } et de ne pas oublier une virgule, sinon votre graphique ne d'afficheras pas.
Conseil : après chaque modification, testez le résultat.
Avant
Après

Un autre exemple, nous allons rajouter une image dans notre graphique.

Tutoriel HighCharts
En cliquant sur le lien, la page http://jsfiddle.net/ s'ouvre et on récupère le code
On insère ce code dans notre graphique
name: 'Humidex',
color: '#bd005c',
dashStyle: 'ShortDash',
data: comArr(outdoorheatindex),
}
]
}, function(chart) {
chart.renderer.image('http://www.boock.ch/meteo/images/ban_villarzel.gif', 450, 3, 43, 50)
.add();

});
});
});
avec comme paramétres, l'URL de l'image, la position x, la position y, la largeur de l'image, la hauteur de l'image.
Résultat

Un dernier exemple, modifions la position et personnalisons notre légende, on fait une recherche sur "legend"

Dans la fenêtre de droite, vous voyez toutes les options disponibles pour la légende.
Dans notre graphique il n'y a pas encore de référence à la légende, c'est celle par défaut qui s'est affichée.
Il faut donc insérer à quelques parts dans notre code cette balise "légend" l'endroit n'a pas d'importance, il faut juste l'insérer à la fin d'une autre option. On choisit par exemple de la mettre après la balise "credit" donc on la place après la dernière virgule de l'option crédit.

credits: {
text: '© Météo Villarzel',
href: 'http://www.boock.ch/meteo-villarzel.php'
}
,

legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
Le résultat n'est pas terrible
graphiques HighCharts
On va déjà centrer cette légende en haut du graphique. Il faut jouer avec les valeurs x et y jusqu'au résultat voulu.
legend: {
align: 'center',
verticalAlign: 'center',
x: 20,
y: 50,
},
On lui met une couleur de fond pour la rendre plus visible
legend: {
align: 'center',
verticalAlign: 'center',
x: 20,
y: 50,
backgroundColor: '#FCFFC5'
},
Tutoriel HighCharts
C'est déjà mieux, mais il y a encore trop d'espace en bas du graphique
Rappelez-vous, au début du code du graphique, on avais défini une marge "bas" avec "marginBottom:60"
on diminue cette valeur à 30
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'spline',
marginRight: 10,

marginBottom: 30,
plotBorderColor: '#346691',
plotBorderWidth: 1,
Tutoriel HighCharts
Une dernière chose, si vous ne voulez pas afficher une courbe à l'ouverture du graphique, il suffit de rajouter ce code dans "data"
  {
name: 'Point de rosée',
color: '#3399FF',
visible: false,
data: comArr(dewpoint)
},
Tutoriel HighCharts

Maitenant à vous de jouer avec les innombrables options des API, absolument tout est personnalisable, mais il faut mettre la main à la pâte.

 

Untitled Document


Este tutorial también está disponible en español
This tutorial is also available in in English
Vous avez aimé ce tutoriel, il vous a rendu service,
alors dites-le-moi.
Ou aidez-moi à maintenir ce site en fonction.
  Untitled Document
Station Davis Vantage Pro 2 + station agricole - Weatherlink 6.0.0 - GraphWeather 3.0.15
© 2010-2013, Météo Villarzel - Webmaster Aubert Pierre-André

Attention, les données météo publiées sur ce site sont issues d'une station météo personnelle et ne sont données qu'à titre indicatif,
elles ne peuvent en aucun cas être utilisées pour garantir la protection des personnes ou de biens quelconques.
Stations amies

 

MySQL - Highcharts  page n°8
Personnalisation avec l'api Highcharts.