Plantilla:Graph:Chart/ús

Paràmetres

• width: amplada del diagrama
• height: alçada del diagrama
• type: tipus de diagrama: line per diagrama de punts i línies, area per diagrama d'àrees, rect per a diagrama de barres verticals, i pie per diagrama de sectors. Les sèries múltiples es poden apilar amb el prefix stacked per exemple stackedarea.
• interpolate: mètode d'interpolació per a diagrames de línies i àrees. Es recomana fer servir monotone per a la interpolació cúbica monòtona.
• colors: paleta de colors del diagrama com a llista de colors separada per comes. Els valors de color han de ser donats com #rgb/#rrggbb/#aarrggbb o per un color web. Per #aarrggbb el component aa denota el canal alfa, per exemple FF=100% opacitat, 80=50% opacitat/transparència, etc. (La paleta de colors predeterminada si n <= 10 és Category10:                                         sinó és Category20:                                                                                ).
• xAxisTitle i yAxisTitle: subtítols dels eixos x i y
• xAxisMin, xAxisMax, yAxisMin, i yAxisMax: valors mínims i màxims dels eixos x i y (encara no s'admeten per a la barra gràfics). Aquests paràmetres es poden utilitzar per invertir l'escala d'un eix numèric establint el valor més baix a Max i el valor més alt a Min.
• xAxisFormat i yAxisFormat: canvia la formatació de les etiquetes de l'eix. Els valors admesos es troben a https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers per a números ihttps://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md per a la data/hora. Per exemple, el format % es pot utilitzar per produir percentatges.
• xAxisAngle: gira les etiquetes de l'eix x per l'angle especificat. Els valors recomanats són: -45, +45, -90, +90
• xType i yType: Tipus de dades dels valors, p. ex. integer pels números enters, number per a números reals, date per a dates (e.g. YYYY/MM/DD), i string per a valors ordinals (utilitzeu string per evitar que es repeteixin valors d'eix quan només hi ha uns quants valors).
• x: els valors x com a llista separada per comes
• y o y1, y2, …: els valors y d'una o diverses sèries de dades, respectivament. Per a diagrames de sectors y2 indiquen els radis dels sectors corresponents.
• legend: mostra la llegenda (només funciona en cas de diverses sèries de dades)
• y1Title, y2Title, …: defineix l'etiqueta de les sèries de dades respectives a la llegenda
• linewidth: amplada de línia per a gràfics de línia o distància entre els sectors dels diagrames de sectors
• showValues: A més, mostra els valors y com a text. (Actualment, només s'admeten pels gràfics de barres i de sectors (no pels apilats). La sortida es pot configurar utilitzant els paràmetres següents proporcionats com a name1:value1, name2:value2:
  • format: Formata la sortida segons https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers fper a números i https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md per a la data/hora.
  • fontcolor: color del text
  • fontsize: mida de text
  • offset: desplaça el text per la compensació donada. Per a diagrames de barres i de sectors amb midangle també es defineix si el text es troba dins o fora del diagrama.
  • angle (solament per a diagrames de sectors): angle de text en graus o midangle (predeterminat) per a angles dinàmics basats en l'angle mitjà dels sectors.
• showSymbols: Per a diagrames de línies: mostra un símbol (cercle) a cada punt de dades. (ús: showSymbols=true)
• innerRadius: Per a diagrames de sectors: defineix el radi interior per crear un diagrama donut.

Nota: En la vista prèvia de l'editor, l'extensió del gràfic crea un element canvas amb gràfics vectorials. Tanmateix, en desar la pàgina es genera un gràfic ràster PNG.

Nota: Us pot ser d'utilitat alternativa a aquesta plantilla el Mòdul:Chart, amb les següents funcions que no disposa aquesta plantilla:

• Globus d'informació (missatge emergent en passar sobre un element -barra, sector- amb el cursor del ratolí) estàndards o personalitzats
• Enllaços personalitzats des dels elements.
• Barres amb escales Y diferents per a diferents sèries de dades.

Exemples

Exemples bàsics

Diagrama de línies:

{{Graph:Chart
 | width = 400
 | height = 150
 | type = line
 | x = 1,2,3,4,5,6,7,8
 | y = 10,12,6,14,2,10,7,9
}}

Nota: L'eix y comença des del valor y més petit, encara que es pot substituir amb el paràmetre yAxisMin.

Diagrama d'àrees:

{{Graph:Chart
 | width=400
 | height=100
 | type=area
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Nota: L’eix y comença des de zero

Diagrama de barres:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=L’eix X
 | yAxisTitle=L’eix Y
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Sèrie de dades múltiples

Diagrama de línies amb més d'una sèrie de dades, mitjançant colors:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Llegenda
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | colors=#0000aa,#ff8000
}}

Diagrama d'àrees amb més d'una sèrie de dades que mostren solapament entre elles:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Llegenda
 | type=area
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | colors=#800000aa,#80ff8000
}}

Diagrama de barres amb sèries de dades múltiples:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Llegenda
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 |colors=#800000aa,#80ff8000
}}

Diagrama d'àrees amb valors de dades suavitzats:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Llegenda
 | type=stackedarea
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | interpolate=monotone
 | colors=seagreen, orchid
}}

Diagrama de barres amb sèries de dades apilades:

{{Graph:Chart
 | width=400 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Llegenda
 | type=stackedrect
 | showValues = offset:4
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | y1Title=Data A
 | y2Title=Data B
 | colors=pink, lime
}}

Diagrames de sectors

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Lletra
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Lletra
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
 | showValues=
}}

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Lletra
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
 | y2=7,8,9,8,8,9,10,9,5
 | showValues=
}}

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | innerRadius=40
 | legend=Lletra
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

Utilitzant percentatges

• Quan xAxisFormat o yAxisFormat tenen el valor de %, s’afegirà un signe percentual a l’escala de l’eix corresponent.
• Un valor de 1 equival al 100%. Així, cal afegir un punt decimal davant de percentatges entre 0 i 100. Per exemple .25 pel 25%.
• Incloent el codi | yAxisMin=0 | yAxisMax=1 obligarà l'escala de l'eix y a passar del 0% al 100%.

{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisMin = 0
| yAxisMax = 1
| yAxisFormat = %
| showSymbols = 
| y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
| y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63
| y3 = .27, .311, .31, , .26, .28, .285
| y4 = {{Loop|7|, }} .40, .44, .42, .47, .44, .43, .42
}}

Un diagrama que mostra valors superiors al 100% i valors negatius:

{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisFormat = %
| showSymbols = 
| y1 = 2, .43, 1.20, .39, .43, .0, -.38, -.20, .18, .54 , 0
}}

Mostra

Diagrama de línies en un {{image frame}}:

{{Image frame 
 | caption=Line chart 
 | content = {{Graph:Chart
   | width=400
   | height=150
   | type=line
   | x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9
  }} 
}}

Line chart

Diagrama de barres a {{Caixa lateral}}:

{{Caixa lateral |metadata=No<!--Això fa que es mostri el quadre al lloc mòbil-->
 | above = '''Un diagrama d'alguna cosa'''
 | abovestyle = text-align:center
 | text = {{Graph:Chart
  |height = 150
  |width = 200
  |xAxisTitle = Any
  |xAxisAngle = -40
  |yAxisTitle = Unitats d’alguna cosa
  |yAxisMin = 0
  |type = rect
  |showValues = offset:4
  |x = 2011, 2012, 2013, 2014, 2015, 2016
  |y1 = 1326, 145, 203, 377, 639, 306
  |y2 =   ,     ,     , 226, 208, 276
  |colors = blue,grey
  }}
 | below = Subtítol i enllaços aquí
}}

Llegendes

Es pot afegir una llegenda per a diverses sèries de dades:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Llegenda
 | y1Title=Blau
 | y2Title=Taronja
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}

Es pot ometre el títol deixant el paràmetre en blanc:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=
 | y1Title=Blau
 | y2Title=Taronja
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}

Les entrades llargues de llegendes poden semblar maldestres. Potser serà millor ometre el paràmetre de la llegenda i fer servir {{Llegenda}} (o a similar template) similar:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | colors=darkred, gold
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}
{{Llegenda|darkred|Aquesta és una entrada de llegenda llarga i no es veuria tan bé si formava part del gràfic en si.}}
{{Llegenda|gold|Aquesta és una altra entrada força llarga.}}

  Aquesta és una entrada de llegenda llarga i no es veuria tan bé si formava part del gràfic en si.

  Aquesta és una altra entrada força llarga.

Aquest mètode també permet l'ús de format wiki i la inserció d'enllaços. Els gràfics que utilitzin els colors predeterminats han d’especificar els valors hexadecimals de les plantilles de la llegenda:

  #1f77b4

  #ff7f0e

  #2ca02c

  #d62728

  #9467bd

  #8c564b

  #e377c2

  #7f7f7f

  #bcbd22

  #17becf

Alternativament, es poden especificar pel diagrama i per les plantilles de llegenda els noms del colors HTML (o els valors hexadecimals).

Vegeu també

• Mòdul:Chart, amb les següents funcions que no disposa aquesta plantilla:
  • Globus d'informació (missatge emergent en passar sobre un element -barra, sector- amb el cursor del ratolí) estàndards o personalitzats
  • Enllaços personalitzats des dels elements.
  • Barres amb escales Y diferents per a diferents sèries de dades.