Outils pour utilisateurs

Outils du site


devweb:highcharts (lu 22577 fois)

Highcharts

Highcharts est un script javascript permettant de générer des graphiques dynamiques en SVG. Il possède de nombreuses fonctionnalités et permet d’exporter les graphiques au format png, jpeg, svg, pdf.

Site web ⇒ http://www.highcharts.com/ Docs APIhttp://api.highcharts.com/

Options par défaut

Il est important de savoir que highcharts converti les données horaire en gmt ce qui peut créer des surprises. Nous allons supprimer cette option et en même temps franciser le tout.

  Highcharts.setOptions({
    lang: {
      loading: 'Chargement en cours',
      rangeSelectorZoom: '',
      months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
      weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
      shortMonths: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
      decimalPoint: ',',
      thousandsSep: " "
    },
    global: {
      useUTC: false
    }
  });

Exporter soi-même

Par défaut lorsque vous exportez votre graphique, les données sont envoyées sur le serveur highcharts qui se charge de nous générer un pdf ou une image. Pour plusieurs raison, nous voulons exporter nous même nos graphs.

Tuto ⇒ http://www.highcharts.com/docs/export-module/render-charts-serverside

Télécharger phantomJS sur http://phantomjs.org/download.html suivant votre système 32 ou 64bits.

Une fois décompressé nous avons besoin uniquement du binaire phantomjs qui se trouve dans le répertoire bin. Nous allons le copier dans /usr/local/bin pour qu’il soit accessible de partout.

Téléchargez le fichier highcharts-convert.js

et modifiez la partie config

Assurez vous de copier les fichiers suivant et de les placer selon votre configuration précédente (disponible ⇒ https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs )

  • jquery.1.9.1.min.js
  • highstock.js
  • highcharts.js
  • highcharts-more.js
  • data.js

Graphique avec une ligne pleine et pointillée mélangée

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5,null,24.8,24.1,20.1]
            }, {
                name: 'New York',
                data: [{x: 5, y: 21.5}, {x: 6, y: 22.0},{x: 7, y: 24.8}, {x: 8, y: null}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
                dashStyle: 'dash'
            }]
        });
    });
 
});

exemple ⇒ http://jsfiddle.net/mkremer90/zMZEV/1/

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Zone with dash style'
        },
        subtitle: {
            text: 'Dotted line typically signifies prognosis'
        },
    	xAxis: {
    	    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    	},
	    series: [{
    	    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    	    zoneAxis: 'x',
    	    zones: [{
    	        value: 7,
                dashStyle: 'solid'
    	    }, {
    	        value: 8,
                dashStyle: 'dot'
    	    }, {
                value: 9,
    	        dashStyle: 'solid'
    	    }]
    	}]
    });
});

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/

devweb/highcharts.txt · Dernière modification: 04-09-2018 11:23 de edmc73