Conceptos básicos
En este apartado ofrecemos ejemplos sencillos para mostrar cómo funcionan los gráficos en los diseños SPS. Estos gráficos están en el archivo SPS SimpleCharts.sps. Este diseño SPS está basado en el esquema XML YearlySales.xsd y utiliza YearlySales.xml (imagen siguiente) como archivo XML de trabajo. Los tres archivos están guardados en la carpeta (Mis) Documentos: C:\Documents and Settings\<usuario>\Mis Documentos\Altova\StyleVision2023\StyleVisionExamples/Tutorial/Charts.
<?xml version="1.0" encoding="UTF-8"?> <Data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="YearlySales.xsd"> <ChartType>Pie Chart 2D</ChartType> <Region id="Americas"> <Year id="2005">30000</Year> <Year id="2006">90000</Year> <Year id="2007">120000</Year> <Year id="2008">180000</Year> <Year id="2009">140000</Year> <Year id="2010">100000</Year> </Region> <Region id="Europe"> <Year id="2005">50000</Year> <Year id="2006">60000</Year> <Year id="2007">80000</Year> <Year id="2008">100000</Year> <Year id="2009">95000</Year> <Year id="2010">80000</Year> </Region> <Region id="Asia"> <Year id="2005">10000</Year> <Year id="2006">25000</Year> <Year id="2007">70000</Year> <Year id="2008">110000</Year> <Year id="2009">125000</Year> <Year id="2010">150000</Year> </Region> </Data> |
Después de abrir el archivo SPS en StyleVision, compruebe la configuración del gráfico para ver cómo se seleccionaron los datos para los ejes. Para ello, haga clic con el botón derecho en los gráficos y seleccione el comando Editar configuración del gráfico. Se abre el diálogo "Configuración del gráfico". En el panel Selección de datos del gráfico, situado al final del diálogo, hay varios campos donde se introducen las expresiones XPath necesarias para seleccionar datos (imagen siguiente). Para ver una vista previa del gráfico, abra la vista Authentic.
Las cuatro expresiones XPath del panel Selección de datos del gráfico se combinan para conseguir los resultados siguientes:
•Expresión for-Each (XPath): (i) establece el contexto para las otras tres expresiones XPath y (ii) define el número de elementos de la secuencia devuelta como número de marcas del eje X. En el gráfico de la imagen anterior, por ejemplo, la expresión Region[1]/Year devuelve seis elementos de nodo. Es decir, el eje X del gráfico tendrá seis marcas de graduación (imagen siguiente).
•Expresión XPath para el eje X: los elementos de la secuencia devuelta ofrecen el texto de la etiqueta de cada marca del eje X. En el gráfico de la imagen anterior, por ejemplo, la expresión @id devuelve el valor del atributo id de cada elemento Year. Estos valores serán las etiquetas de las marcas del eje X (imagen siguiente). Puesto que este gráfico es un gráfico de barras, en cada marca de graduación se dibuja una barra.
•Expresión XPath para el eje Y: el eje Y puede mostrar varias series y cada serie se define en una fila distinta del eje Y. Cada serie se define con dos expresiones XPath: una para el valor de la serie y otra para el nombre de la serie. En el gráfico de la imagen anterior, por ejemplo, la expresión XPath self::node() (que aquí aparece en su versión abreviada) selecciona el nodo actual, es decir, el elemento Year que funciona como nodo de contexto. Por tanto, por cada elemento Year (representado por una barra del eje X), el contenido del elemento Year se leerá como valor del eje Y de dicho año. Como consecuencia, este valor dará la altura de la barra (imagen siguiente). La imagen que aparece un poco más abajo muestra un gráfico cuyo eje Y tiene varias series.
•Expresión XPath para el nombre de la serie: esta expresión ofrece el texto de la leyenda de cada serie. En el gráfico de la imagen anterior, por ejemplo, el texto de la leyenda (que aparece en la parte inferior del gráfico) se obtiene mediante una expresión XPath que es una cadena de texto (imagen anterior).
La imagen anterior muestra un gráfico de barras con una sola serie. Por su parte, la imagen siguiente muestra un gráfico de barras apiladas con varias series. En la segunda imagen, el valor de cada serie se apila sobre la barra.
Para ver cómo se definió este segundo gráfico, abra su cuadro de diálogo de configuración, donde podrá ver las expresiones XPath utilizadas para seleccionar los datos (imagen siguiente).
