Wikipédia

Aide:Frise chronologique/tutoriel

< Aide:Frise chronologique

Ce tutoriel repose sur l'usage de l'extension EasyTimeline

Configurer le diagramme

modifier

Balises timeline

modifier

Le code du diagramme doit se trouver entre des balises timeline.

Exemple: 

 <timeline>
 script
 </timeline>

Definir la taille de l'image

modifier

Syntaxe: 

ImageSize  = width:800 height:auto barincrement:37
  • width peut prendre en valeur un nombre de pixels ou la valeur auto
  • Hauteur min:25px, max:1200px
  • Largeur min:25px, max: 1600px
  • Si TimeAxis est à vertical width peut être à auto, s'il est à horizontal c'est height qui peut être auto
  • Bar increment
    • uniquement si l'un des param vaut auto
    • taille en pixel entre chaque barre du graphique

Definir la zone d'affichage

modifier

Syntaxe 

PlotArea   = left:15 right:15 bottom:30 top:15
  • left,top,right,bottom:marges en pixel autour du graphe
    • Right et bottom sont facultatifs

Couleurs prédéfinies

modifier

Définir des tags de couleur pour mieux identifier la couleur.

Syntaxe 

Colors =
 id:war       value:red   legend:War_Period
 id:peace     value:blue  legend:Peace_Time
 id:treaty    value:rgb(0.6,0,0.6)
 id:lightgrey value:gray(0.9)
  • id: identifiant de la couleur,
  • value: définition de la couleur, peut être une couleur html, définie par la fonction rgb(r,g,b), hsv(h,s,v) ou gray() (les paramètres varient entre 0 et 1)

Definir le format d'écriture des dates

modifier

Syntaxe: 

DateFormat = mm/dd/yyyy

Formats pris en charge :

  • dd/mm/yyyy
  • mm/dd/yyyy
  • yyyy

Définir la plage de temps représentée sur le graphe

modifier

Plage de temps représentée sur le graphe: Syntaxe: 

Period = from:01/09/1939 till:02/09/1945

Les paramètres from et till doivent être exprimes dans le format précisé avec date format

Définir l'orientation de l'axe temporel et le format de date utilisé sur l'axe

modifier

Syntaxe: 

TimeAxis = orientation:horizontal format:yyyy

Paramètres:

  • format (optionel): pour donner le format des dates spécifique a l'axe temporel
  • orientation: hor, horizontal ou ver, vertical
  • order: reverse (optionnel)

Définir le pas de l'échelle de temps des axes

modifier

Échelle principale

modifier

Ajoute des repères sur le graphique. syntaxe: 

ScaleMajor = gridcolor:red unit:month increment:3 start:01/09/1939

Paramètres:

  • gridcolor:color-id
    • Color id doit avoir défini dans la liste des paramètres
    • Si ce param est absent la grille n'apparait pas
  • unit: day, month, year
    • si Dateformat est à yyyy seul year est autorise
  • increment:1
    • Un entier
    • Defini l'espacement de la grille
  • Start (optional): à utiliser si l’échelle ne commence pas avec la période du graphe

Échelle mineure

modifier

Pour définir une sous échelle. Même syntaxe que pour scale major

exemple annees et trimestres: 

ScaleMajor = grid:red  unit:year  increment:1 start:01/01/1940
ScaleMinor = grid:blue unit:month increment:3 start:01/10/1939

Gerer l'alignement des barres

modifier

Exemple: 

AlignBars  = early

Valeurs possibles:

  • Early, late, justify

Gerer les arrières plans:BackgroundColor

modifier

Exemples: 

BackgroundColors = bars:darkgrey
BackgroundColors = canvas:lightgrey bars:darkgrey
BackgroundColors = canvas:lightgrey

Attributs:

  • canvas:color-id
    • Arrière plan pour toute l'image
  • bars:color-id
    • Arrière plan pour les barres

Intégrer des éléments

modifier

BarData

modifier

BarData sert à déclarer les bars qui seront utilisée dans le champ plot data. Pour utiliser un élément barset, il faut au préalable le déclarer dans BarData

Exemple de syntaxe: 

BarData =
 bar:Japan
 bar:US       text:"United States"  # refer in PlotData to bar "US" but show "United States"
 bar:China    text:China        # label China will be shown as blue clickable link to the English Wikipedia article about China
 Barset:barset-id

Attributs:

  • bar:bar-id
  • barset:barset-id
  • text:du_texte
    • remplacer bar-id par le texte donne au moment de l'affichage du graphe
  • link:local_url

PlotData: le conteneur de base

modifier

Utilisé pour dessiner des barres et une légende à côté.

Syntaxe de base

modifier 
PlotData=
 bar:Japan from:start      till:19/02/1945 color:JT
 bar:Japan from:19/02/1945 till:14/03/1945 color:AI
 bar:Japan from:02/09/1945 till:end        color:AO

 at:07/12/1941 shift:(0,-15) text:"<-- WW2 reaches Asia"

Barres

modifier

Exemple: 

PlotData=
 width:0.3                                                            # see note 1
 bar:Timeperiod color:Timeperiod shift:(0,0)
 from:start till:end color:gris # Arrière plan

 from:866  till:1304 text: "Flandre" color:Timeperiod2 
 from:1304 till:1369 text: "~France" 
 from:1369 till:1477 text: "Bourgogne" color:Timeperiod2 
 from:1477 till:1579 text: "~Habsbourg" 
 from:1579 till:1667 text: "Espagne" color:Timeperiod2 
 from:1667 till:end  text: "~France"                  # see note 5

Paramètres:

  • bar:bar-id
    • Nom de la barre, utilisé par BarData
  • barset (optionnel):barset-id / break
    • barset sert à mettre plusieurs barres ensemble avec passage a la ligne suivante pour chaque periode
    • tres utiles pour les dynasties ou les périodes qui se chevauchent
  • color:color-id
  • width(optionel):Largeur en pixels ou en % de la barre
Barset
modifier

Barset sert à faire un jeu de barres (Voir exemple en bas)


Syntaxe: 

BarData=
 Barset:monBarset

PlotData=
 barset:monBarset
 from:1999 till:2002 # barre 1
 from:2000 till:2001 # barre 2
 barset:break # retour e haut du barset
 from:2004 till:2008 # barre 3

Exemple avec barset: 

#alignement →
 width:25 fontsize:S textcolor:black anchor:from align:left color:noir
 barset:Timeperiod2
 from:640  till:640  text:"640 ~Fondation légendaire de Lille" shift:(2,0)
 from:1066 till:1066 text:"1066 ~Mention de la ville dans les archives" shift:(2,0) #une ligne plus bas

 #alignement ←
 width:25 fontsize:S textcolor:black anchor:from align:right color:noir
 
 from:1454 till:1454 text:"1454 ~Voeu du faisan" shift:(0,0)
 from:1581 till:1582 text:"1581-1582 ~Assauts des Hurlus" shift:(0,0) color:guerre
 from:1708 till:1713 text:"1708-1713 ~Occupation hollandaise" shift:(0,0) color:guerre
 from:1792 till:1792 text:"1792 ~Siège autrichien" shift:(0,0) color:guerre
 from:1846 till:1846 text:"1846 ~Chemin de fer Paris-Lille" shift:(0,0)
 from:1853 till:1853 text:"1853 ~Composition du Ptit Quinquin" shift:(0,0)
 from:1888 till:1888 text:"1888 ~Composition de l'internationale" shift:(0,0)
 #La différence avec bar, c'est que les dates ne sont pas collées

Ajouter du texte a une barre

modifier

Attributs:

  • text:du_texte
  • textcolor:color-id
  • align:center/left/right
    • Par defaut:cente
  • link:url

Positionner des éléments

modifier
  • at:time
    • Defini le debut du bloc
  • from:time till:time
    • Defini une date de debut et une date de fin pour le bloc
    • incompatible avec at
  • shift:(x,y)

Exemple: 

 at:07/12/1941 shift:(0,-15) text:"<-- WW2 reaches Asia"

Marqueurs

modifier

Ces éléments sont utiles pour indiquer une date sur une barre.

Exemple de syntaxe: 

PlotData=
 bar:test width:15 color:red
 from:1900 till:2000
 at:1990 mark:(line,white)

Attribut:

  • mark:(symbol,color-id)
    • Pour le moment symbol ne peut prendre que la valeur ligne

Ajouter une légende:Legend

modifier

Exemples: 

Legend = orientation:vertical position:bottom columns:3 columnwidth:140
Legend = orientation:horizontal position:bottom
Legend = left:100 top:120 columns:3

Attributs:

  • orientation:hor/horizontal/ver/vertical
    • orientation horizontal et position right ne sont pas compatible
  • position:top/bottom/right
  • columns:entier
    • Entre 1 et 4
    • Defini automatiquement si cet attribut n'est pas precise

Les trois attributs suivant devraient être laissés dans leur valeur par défaut

  • coloumnwidth:distance
  • left:distance
    • Distance entre le côté gauche de la légende et le côté gauche de l'image
  • top:
    • Distance entre le haut de la légende et le haut de l'image

Ajouter un bloc de texte au diagramme:TextData

modifier

Exemple de syntaxe: 

TextData =
 pos:(20,67) textcolor:black fontsize:S
 tabs:(10-right,14-left,50-left,90-left,230-left)
 text:^1^1940^27/9^Germany,Italy and Japan sign Tripartite Pact
 text:^10^1944^1-22/7^Bretton Woods 44 nations establish
 text:^^^^^IMF and World Bank

Attribut attendus:

  • pos:(x,y)
    • Position du texte par rapport au coin haut gauche du diagramme
  • text:du_texte
    • Texte a ajouter
  • link:url
  • textcolor:color-id
  • fontsize:entier/tag
    • L'entier doit être entre 6 et 30
    • tag peut prendre les valeurs:XS, S(defaut), M, L, XL
  • tabs:
    • Gerer les tabulations
  • lineheight:mesure aboslue (px,in,cm)
    • distance entre deux lignes consécutives
    • jusqu'à 40 px

Dessiner des lines sur le diagramme:LineData

modifier

Exemple de syntaxe: 

LineData =
 layer:front                                            # all lines in front of bars unless stated otherwise
 at:1                         color:yellow              # perpendicular to time axis full length
 at:2                         color:orange  layer:back  # perpendicular to time axis full length but behind bars
 at:4  frompos:50 tillpos:105 color:green               # perpendicular to time axis, with specified start and stop points
 from:5 till:8 atpos:50       color:red                 # parallel to time axis
 points:(100,20)(170,105)     color:blue    width:3     # from one arbitrary absolute position to another, extra thick

Reutiliser des constantes: Define

modifier

Pour réutiliser des constantes qui apparaissent plusieurs fois dans le graphique: Exemple de syntaxe: 

Define $broad       = width:30
Define $narrow      = width:10
Define $bardefaults = $broad fontsize:S

Exemple complet

modifier 
<timeline>
DateFormat = yyyy
ImageSize  = width:800 height:auto barincrement:37
PlotArea   = left:15 right:15 bottom:30 top:15

Colors     =
  id:canvas      value:rgb(0.97,0.97,0.97)
  id:grid1       value:rgb(0.80,0.80,0.80)
  id:grid2       value:rgb(0.86,0.86,0.86)
  id:Timeperiod  value:red
  id:Timeperiod2 value:rgb(0.86,0.56,0.56)
  id:gris        value:gray(0.7)
  id:noir        value:black
  id:guerre      value:red
  id:blanc       value:white

Period     = from:600 till:2020
TimeAxis   = orientation:horizontal format:yyyy
ScaleMajor = unit:year  increment:100 start:600 gridcolor:grid1
ScaleMinor = unit:year  increment:50  start:1050 gridcolor:grid2
AlignBars  = justify

BackgroundColors = canvas:canvas bars:canvas

BarData=
  bar:Timeperiod 
  barset:Timeperiod2

PlotData=
  width:30 fontsize:S textcolor:noir align:center

  # Époques
  bar:Timeperiod color:Timeperiod shift:(0,0)
  from:start till:end color:gris # Arrière plan

  from:866  till:1304 text: "Flandre" color:Timeperiod2 
  from:1304 till:1369 text: "~France" 
  from:1369 till:1477 text: "Bourgogne" color:Timeperiod2 
  from:1477 till:1579 text: "~Habsbourg" 
  from:1579 till:1667 text: "Espagne" color:Timeperiod2 
  from:1667 till:end  text: "~France" 

  # Évennements
  #alignement →
  width:25 fontsize:S textcolor:black anchor:from align:left color:noir
  barset:Timeperiod2
  from:640  till:640  text:"640 ~Fondation légendaire de Lille" shift:(2,0)
  from:1066 till:1066 text:"1066 ~Mention de la ville dans les archives" shift:(2,0)

  #alignement ←
  width:25 fontsize:S textcolor:black anchor:from align:right color:noir
  
  from:1454 till:1454 text:"1454 ~Voeu du faisan" shift:(0,0)
  from:1581 till:1582 text:"1581-1582 ~Assauts des Hurlus" shift:(0,0) color:guerre
  from:1708 till:1713 text:"1708-1713 ~Occupation hollandaise" shift:(0,0) color:guerre
  from:1792 till:1792 text:"1792 ~Siège autrichien" shift:(0,0) color:guerre
  from:1846 till:1846 text:"1846 ~Chemin de fer Paris-Lille" shift:(0,0)
  from:1853 till:1853 text:"1853 ~Composition du Ptit Quinquin" shift:(0,0)
  from:1888 till:1888 text:"1888 ~Composition de l'internationale" shift:(0,0)
  # Recommencer l'indentation en haut
  barset:break

  from:1914 till:1918 text:"1914-1918 ~Occupation allemande" shift:(0,0) color:guerre
  from:1940 till:1944 text:"1940-1944 ~Occupation nazie" shift:(0,0) color:guerre
  from:1960 till:1980 text:"Crise métallurgique, textile et minière" shift:(0,0) color:gris
  from:1969 till:1969 text:"1969 ~Communauté urbaine de Lille" shift:(0,0)
  from:1993 till:1993 text:"1993 ~TGV Paris-Lille" shift:(0,0)
  from:2003 till:2004 text:"2004 ~Lille 2004" shift:(0,0)
 </timeline>
Ce document provient de « https://fr.wiki.x.io/w/index.php?title=Aide:Frise_chronologique/tutoriel&oldid=157886118 ».