Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
devweb:highcharts [22-01-2015 09:58] edmc73 créée |
devweb:highcharts [04-09-2018 11:23] (Version actuelle) edmc73 [Options par défaut] |
||
---|---|---|---|
Ligne 12: | Ligne 12: | ||
Highcharts.setOptions({ | Highcharts.setOptions({ | ||
lang: { | lang: { | ||
- | loading: 'graph is loading', | + | loading: 'Chargement en cours', |
rangeSelectorZoom: | rangeSelectorZoom: | ||
months: [' | months: [' | ||
Ligne 18: | Ligne 18: | ||
shortMonths: | shortMonths: | ||
decimalPoint: | decimalPoint: | ||
- | thousandsSep: | + | thousandsSep: |
}, | }, | ||
global: { | global: { | ||
Ligne 38: | Ligne 38: | ||
Téléchargez le fichier [[https:// | Téléchargez le fichier [[https:// | ||
+ | et modifiez la partie config | ||
+ | Assurez vous de copier les fichiers suivant et de les placer selon votre configuration précédente (disponible => https:// | ||
+ | * 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 ===== | ||
+ | |||
+ | <code javascript> | ||
+ | $(function () { | ||
+ | var chart; | ||
+ | $(document).ready(function() { | ||
+ | chart = new Highcharts.Chart({ | ||
+ | chart: { | ||
+ | renderTo: ' | ||
+ | type: ' | ||
+ | marginRight: | ||
+ | marginBottom: | ||
+ | }, | ||
+ | title: { | ||
+ | text: ' | ||
+ | x: -20 //center | ||
+ | }, | ||
+ | subtitle: { | ||
+ | text: ' | ||
+ | x: -20 | ||
+ | }, | ||
+ | xAxis: { | ||
+ | categories: [' | ||
+ | ' | ||
+ | }, | ||
+ | yAxis: { | ||
+ | title: { | ||
+ | text: ' | ||
+ | }, | ||
+ | plotLines: [{ | ||
+ | value: 0, | ||
+ | width: 1, | ||
+ | color: '# | ||
+ | }] | ||
+ | }, | ||
+ | tooltip: { | ||
+ | formatter: function() { | ||
+ | return '< | ||
+ | this.x +': '+ this.y +' | ||
+ | } | ||
+ | }, | ||
+ | legend: { | ||
+ | layout: ' | ||
+ | align: ' | ||
+ | verticalAlign: | ||
+ | x: -10, | ||
+ | y: 100, | ||
+ | borderWidth: | ||
+ | }, | ||
+ | series: [{ | ||
+ | name: ' | ||
+ | data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, | ||
+ | }, { | ||
+ | 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: ' | ||
+ | }] | ||
+ | }); | ||
+ | }); | ||
+ | | ||
+ | }); | ||
+ | </ | ||
+ | exemple => http:// | ||
+ | |||
+ | <code javascript> | ||
+ | $(function () { | ||
+ | $('# | ||
+ | title: { | ||
+ | text: 'Zone with dash style' | ||
+ | }, | ||
+ | subtitle: { | ||
+ | text: ' | ||
+ | }, | ||
+ | xAxis: { | ||
+ | categories: [' | ||
+ | }, | ||
+ | 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: ' | ||
+ | zones: [{ | ||
+ | value: 7, | ||
+ | dashStyle: ' | ||
+ | }, { | ||
+ | value: 8, | ||
+ | dashStyle: ' | ||
+ | }, { | ||
+ | value: 9, | ||
+ | dashStyle: ' | ||
+ | }] | ||
+ | }] | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | http:// |