Si tiene datos de un documento de hoja de cálculo (por ejemplo, LibreOffice Calc) o de un software de estadísticas R/R-Studio , puede exportarlos a un archivo CSV. El archivo CSV se puede cargar con v:en:AppLSAC, que puede convertir el CSV en un gráfico para los datos. La columna debe tener encabezados en la primera fila. La columna del archivo CSV debe contener valores flotantes o enteros. CSV2WikiChart se creó como una herramienta de apoyo para Wikipedia y para los recursos de aprendizaje de Wikiversity que contienen datos. Debido a la desactivación temporal de gráficos, una característica adicional de CSV2WikiChart permite la exportación de gráficos en SVG.
line
para gráficos de líneas , area
para gráficos de áreas , para gráficos de barrasrect
(de columnas) y para gráficos circulares . Se pueden apilar varias series usando el prefijo, p. ej .pie
stacked
stackedarea
monotone
para una interpolación cúbica monótona . En https://github.com/nyurik/vega/wiki/Template:Graph/Marks#line se incluyen otros valores admitidos.#rgb
// o mediante un nombre de color CSS . Para el componente, se indica el canal alfa#rrggbb
, es decir, FF=100 % de opacidad, 80=50 % de opacidad/transparencia, etc. ( La paleta de colores predeterminada si n <= 10 es Category10: de lo contrario es Category20 :). Consulte Template:ChartColors para obtener más detalles.#aarrggbb
#aarrggbb
aa
%
se puede utilizar para generar porcentajes. Para la especificación de fecha y hora de los valores admitidos, consulte https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md , por ejemplo, xAxisFormat=%d-%m-%Y
para el resultado 13-01-1977.integer
, para números enteros, number
para números reales, date
para fechas (p. ej., AAAA-MM-DD) y string
para valores ordinales (se utilizan string
para evitar que los valores de los ejes se repitan cuando solo hay unos pocos valores). Observaciones: Date
type no funciona para gráficos de barras. Para date
la entrada de datos, utilice el formato de fecha ISO (p. ej., AAAA-MM-DD) de acuerdo con los formatos de fecha y hora utilizados en HTML. Es posible que funcionen otros formatos de fecha, pero no en todos los navegadores. Lamentablemente, la fecha solo se muestra en formato en-US para todos los idiomas de Wikipedia. La solución alternativa es utilizar xAxisFormat e yAxisFormat con formato de fecha numérico.linear
para escala lineal (predeterminado), log
para escala logarítmica y sqrt
para escala de raíz cuadrada.y2
indica el radio de los sectores correspondientes. Para fechas y horas, consulte la observación en xType y yTypetype=line
se crea un gráfico de dispersión.linewidths=1, 0, 5, 0.2
showSymbols=1, 2, 3, 4
symbolsShape= circle, cross, square
name1:value1, name2:value2
(por ejemplo |showValues=fontcolor:blue,angle:0
).midangle
esto también define si el texto está dentro o fuera del gráfico.midangle
(predeterminado) para ángulos dinámicos basados en el ángulo medio del sector circular.hAnnotatonsLine=4, 5, 6
hAnnotatonsLabel = label1, label2, label3
Nota: En la vista previa del editor, la extensión de gráficos crea un elemento de lienzo con gráficos vectoriales. Sin embargo, al guardar la página, se genera un gráfico rasterizado PNG .
Gráfico de líneas:
{{ Gráfico : Gráfico | ancho = 450 | alto = 150 | tipo = línea | x = 1,2,3,4,5,6,7,8,9 | y = 10,12,6,14,2,10,7,9,12 }}
Nota: El eje y comienza desde el valor y más pequeño, aunque esto se puede anular con el yAxisMin
parámetro.
Gráfico de área:
{{ Gráfico : Gráfico | ancho = 400 | alto = 100 | tipo = área | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }}
Nota: El eje y comienza desde cero
Gráfico de barras:
{{ Gráfico : Gráfico | ancho = 400 | alto = 100 | xAxisTitle = El eje X | yAxisTitle = El eje Y | tipo = rect | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }}
Gráfico de líneas con más de una serie de datos, utilizando colores:
{{ Gráfico : Gráfico | ancho = 400 | alto = 150 | xGrid = | yGrid = | xAxisTitle = X | yAxisTitle = Y | leyenda = Leyenda | tipo = línea | x = 1,2,3,4,5,6,7,8 | y1 = 10,12,6,14,2,10,7,9 | y1Title = Serie Y1 | y2 = 2,4,6,8,13,11,9,2 | y2Title = Serie Y2 | colores = #0000aa,#ff8000 }}
Gráfico de áreas con más de una serie de datos que muestran una superposición combinada:
{{ Gráfico : Gráfico | ancho = 400 | alto = 100 | Título del eje x = X | Título del eje y = Y | leyenda = Leyenda | tipo = área | 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 | colores = #800000aa,#80ff8000 }}
Gráfico de barras con múltiples series de datos:
{{ Gráfico : Gráfico | ancho = 400 | alto = 100 | Título del eje x = X | Título del eje y = Y | leyenda = Leyenda | tipo = 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 | colores = #800000aa,#80ff8000 }}
Gráfico de área con valores de datos suavizados:
{{ Gráfico : Gráfico | ancho = 400 | alto = 150 | Título del eje x = X | Título del eje y = Y | leyenda = Leyenda | tipo = área apilada | 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 | interpolar = monótono | colores = verde mar, orquídea }}
Gráfico de barras con series de datos apilados:
{{ Gráfico : Gráfico | ancho = 400 | alto = 150 | Título del eje x = X | Título del eje y = Y | leyenda = Leyenda | tipo = stackedrect | 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 | Título y1 = Datos A | Título y2 = Datos B | colores = verde mar, orquídea }}
{{ Gráfico : Gráfico | ancho = 100 | alto = 100 | tipo = circular | leyenda = Letra | x = A,B,C,D,E,F,G,H,I | y1 = 100,200,150,300,100,100,150,50,200 }}
{{ Gráfico : Gráfico | ancho = 100 | alto = 100 | tipo = circular | leyenda = Letra | x = A,B,C,D,E,F,G,H,I | y1 = 100,200,150,300,100,100,150,50,200 | mostrarValores = }}
{{ Gráfico : Gráfico | ancho = 100 | alto = 100 | tipo = circular | leyenda = Letra | 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 | mostrarValores = }}
{{ Gráfico : Gráfico | ancho = 100 | alto = 100 | tipo = circular | radio interior = 40 | leyenda = Letra | x = A,B,C,D,E,F,G,H,I | y1 = 100,200,150,300,100,100,150,50,200 }}
Al utilizar un gráfico lineal con linewidth=0
, es posible crear un gráfico de dispersión :
{{ Gráfico : Gráfico | ancho = 500 | alto = 200 | tipo = línea | x = 15,7; 10,8 ; 68,5; 33,4; 23,8; 42,2; 27,1; 38,2; 13,5; 74,3 | y1 = 1517; 970; 4075; 3819; 2106; 2919; 2428 ; 2164; 1393; 7603 | showSymbols = 1 | linewidth = 0 | yGrid = | xGrid = }}
xAxisFormat
o yAxisFormat
se establece en %
, se agregará un signo de porcentaje a la escala del eje correspondiente.1
es igual a 100%. Se debe agregar un punto decimal antes de los porcentajes entre 0 y 100, por ejemplo .25
para 25%.| yAxisMin=0 | yAxisMax=1
forzará que la escala del eje y vaya del 0% al 100%.{{ Gráfico : Gráfico | ancho = 450 | alto = 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 = {{ repetir | 7 | , }} .40, .44, .42, .47, .44, .43, .42 }}
Un gráfico que muestra valores mayores al 100% y valores negativos:
{{ Gráfico : Gráfico | ancho = 450 | alto = 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 }}
Se puede agregar una leyenda donde haya varias series de datos:
{{ Gráfico : Gráfico | ancho = 400 | alto = 150 | Título del eje x = X | Título del eje y = Y | leyenda = Leyenda | Título del eje y = Azul | Título del eje y = Naranja | tipo = línea | 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 }}
El título se puede omitir dejando el parámetro en blanco:
{{ Gráfico : Gráfico | ancho = 400 | alto = 150 | Título del eje x = X | Título del eje y = Y | leyenda = | Título del eje y = Azul | Título del eje y = Naranja | tipo = línea | 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 }}
Las entradas de leyendas largas pueden parecer poco elaboradas. Puede ser mejor omitir el parámetro de leyenda y utilizar {{ Legend }} (o una plantilla similar ) en su lugar:
{{ 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 }} {{ legend | darkred | Esta es una entrada de leyenda larga y no se vería tan bien si fuera parte del gráfico en sí. }} {{ legend | gold | Esta es otra entrada bastante larga. }}
Este método también permite el uso del formato wiki y la inserción de enlaces. Los gráficos que utilizan los colores predeterminados deben especificar los valores hexadecimales en las plantillas de leyenda:
Alternativamente, se pueden especificar nombres de colores CSS (o valores hexadecimales) en las plantillas de gráficos y leyendas.
Gráfico de líneas con anotaciones horizontales únicamente:
{{ Gráfico : Gráfico | hannotatonslabel = etiqueta4, etiqueta5, etiqueta6 | hannotatonsline = 4, 5, 6 | anchosdelinea = 2,4,0 | mostrarSímbolos = 3,3,3 | FormaDeSimbolos = triangulo_arriba, cruz, cruz | tipo = linea | x = 0,1,2,3 | y1 = 0,3.342,2.3423,5.32423 | y2 = 1,2.342,4.63,2.32423 | y3 = 3,1.342,2.63,6.32423 }}
Gráfico de áreas con anotaciones verticales únicamente
{{ Gráfico : Gráfico | vAnnotatonsLine = 1, 2, 3 | vAnnotatonsLabel = etiqueta1, etiqueta2, etiqueta3 | colores = #ffff5ba0, #641050ff, #ffaaff00 | tipo = área | x = 0,1,2,3 | y3 = 0,3.342,2.3423,5.32423 | y2 = 1,2.342,4.63,2.32423 | y1 = 3,1.342,2.63,6.32423 }}
Colocar un gráfico en un {{ marco de imagen }} permite que el gráfico flote y el texto pueda ajustarse a su alrededor:
{{ Marco de imagen | título = Gráfico de líneas | contenido = {{ Gráfico : Gráfico | ancho = 400 | alto = 150 | tipo = línea | yAxisMin = -1 | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }} }}
Para agregar un título encima del gráfico y enlaces de origen debajo del gráfico, una opción es usar |pos=top
en {{ marco de imagen }} .