Outils pour utilisateurs
devweb:highcharts (lu 15168 fois)
Différences
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 08:58] – créée edmc73 | devweb:highcharts [04-09-2018 09:23] (Version actuelle) – [Options par défaut] edmc73 | ||
|---|---|---|---|
| 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:// | ||
devweb/highcharts.1421917119.txt.gz · Dernière modification : de edmc73
Outils de la page
