Différences

Ci-dessous, les différences entre deux révisions de la page.

--- devweb:highcharts [22-01-2015 10:12]
edmc73 [Exporter soi-même]
+++ devweb:highcharts [04-09-2018 11:23] (Version actuelle)
edmc73 [Options par défaut]
@@ Ligne 12: / Ligne 12: @@
   Highcharts.setOptions({
     lang: {
-      loading: 'graph is loading',
+      loading: 'Chargement en cours',
       rangeSelectorZoom: '',
       months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@@ Ligne 18: / Ligne 18: @@
       shortMonths: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
       decimalPoint: ',',
-      thousandsSep: "'"
+      thousandsSep: " "
     },
     global: {
@@ Ligne 46: / Ligne 46: @@
   * highcharts-more.js
   * data.js
+===== Graphique avec une ligne pleine et pointillée mélangée =====
+<code javascript>
+$(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'
+            }]
+        });
+    });
+});
+</code>
+exemple => http://jsfiddle.net/mkremer90/zMZEV/1/
+<code javascript>
+$(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'
+    	    }]
+    	}]
+    });
+});
+</code>
+http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/

Outils pour utilisateurs

Outils du site

Différences

Outils de la page