Visión general:
(ACTUALIZACIÓN 12/04/07: Agrega otro recurso interesante final de enlazar a otro blog que se ocupa de esto a través de una parte muy interesante de la web)
Esta entrada de blog describe cómo crear un gráfico de barras en SharePoint. Esto funciona en entornos WSS y MOSS como solo depende del elemento web vista de datos.
El enfoque general es la siguiente:
- Crear una lista o biblioteca de documentos que contiene los datos que desea gráfico.
- Colocar la biblioteca de documentos asociados / personalizada en una página de la lista y convertirlo en un elemento web de vista de datos (DVWP).
- Modificar XSL del DVWP para generar HTML que se muestra como un gráfico.
Escenario de negocio / El programa de instalación:
He creado una lista personalizada con la columna de título estándar y una columna adicional, "Estado". Estos modelos (muy simplista) una "autorización de gastos" escenario donde el título representa el proyecto y el estado de un valor de la lista de:
- Propuesto
- En proceso
- Estancado
El objetivo es producir un gráfico de barras horizontal interactivo que muestra estos códigos de Estado.
He llenado la lista y este aspecto:
Crear elemento Web vista de datos:
Crear el DVWP agregando la lista personalizada para una página (página en mi caso) y siga las instrucciones aquí (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Además de simplemente crear el DVWP, También tenemos que establecer la propiedad de paginación para mostrar todas las filas disponibles. Para mí, Esto se ve algo como esto:
En este punto, Siempre cierro los SPD y el navegador. Luego volver a abrir la página usar el navegador. Esto evita que accidentalmente limpiando hasta la disposición de parte de la web en la página.
Modificar el XSLT:
Ahora es el momento de modificar el XSLT.
Siempre utilizo visual studio para esto. (Ver aquí para una nota importante acerca de intellisense que le ayudará mucho).
Crear un proyecto vacío agregar cuatro nuevos archivos (sustituir las palabras "Original" y "nuevo" según corresponda):
- Original.XSLT
- New.XSLT
- Params.xml original
- Params.xml nuevo
En mi caso, este aspecto:
Modificar el elemento web y copiar los parámetros y XSL al Original"" versión de Visual Studio.
El objetivo aquí es causar el XSL transformar los resultados que nos metemos atrás de la consulta DVWP en HTML que se representa como un gráfico.
Con este fin, ayuda a considerar primero lo que el HTML debería ser antes de que nos quedamos confundidos por la locura que se conoce como "XSL". (Que quede claro, el siguiente es sólo un ejemplo; no escribe o copia y pegar en visual studio. Proporcionar un golpe completo punto de partida para más adelante en la escritura). El siguiente gráfico de la muestra se procesa según el HTML inmediatamente después de:
HTML correspondiente:
<HTML> <cuerpo> <Centro> <ancho de tabla = 80%> <TR><TD><Centro>Gráfico de barras horizontales</TD></TR> <TR> <TD align = "center"> <frontera tabla = "1" ancho = 80%> <TR> <anchura TD = 10%>Abierto</TD> <TD><tabla cellpadding ="0" cellspacing ="0" border = 0 width = 50%><TR bgcolor = rojo><TD> </TD></TR></mesa></TD> </TR> <TR> <anchura TD = 10%>Cerrado</TD> <TD><tabla cellpadding ="0" cellspacing ="0" border = 0 width = 25%><TR bgcolor = rojo><TD> </TD></TR></mesa></TD> </TR> <TR> <anchura TD = 10%>Estancado</TD> <TD><tabla cellpadding ="0" cellspacing ="0" border = 0 width = 25%><TR bgcolor = rojo><TD> </TD></TR></mesa></TD> </TR> </mesa> </TD> </TR> </mesa> </cuerpo> </HTML> |
Utilicé un enfoque muerto simple para crear mis barras estableciendo el color de fondo de una fila al "rojo".
Esto es el take-away: En el final, todo lo que estamos haciendo es crear HTML con filas y columnas.
Plantilla XSLT:
He copiado el XSLT que genera un gráfico de barras horizontal. Está bastante bien comentado así que no añado mucho aquí excepto estas notas:
- Empecé con el valor por defecto XSL que SharePoint Designerme dio cuando he creado primero el DVWP.
- He podido redujo desde del SPD 657 líneas 166 líneas de.
- Yo no metan con el archivo XML de parámetros (que está separada del XSL y sabrá lo que quiero decir cuando vaya a modificar el DVWP sí; Hay dos archivos que se puede modificar). Sin embargo, a fin de simplificar la TI, Quitar casi todos ellos de la XSL. Esto significa que si usted quiere hacer uso de los parámetros, sólo tiene que añadir sus definiciones variable hacia el XSL. Eso será fácil ya que tendrás las definiciones variable originales de XSL en su proyecto de visual studio.
- Usted debe ser capaz de copiar y pegar esto directamente en su proyecto de visual studio. A continuación, Quitar mis llamadas e insertar sus propias llamadas "ShowBar".
- El detalle de obras mediante la creación de un <a href> Así: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Esta técnica puede ser útil en otros contextos. Al principio, Pensé que tendría que ajustarse a un formato más complejo: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, pero en mi entorno que no es necesario. URL de la lista se pasa a nosotros por SharePoint así que esto es muy fácil generalizar.
Aquí es:
<XSL:hoja de estilos Versión="1.0" excluir resultado de prefijos="RS z o s ddwrt dt msxsl" |
Los resultados:
XSL desde arriba genera este gráfico:
Desglosar los datos subyacentes haciendo clic en el código de Estado:
Reflexiones finales:
Puede ser generalizada?
Me encanta este concepto gráfica, pero odio el hecho de que tengo que ir y hacer tanta codificación manual. Yo he pensado un poco en si puede ser generalizado y soy optimista, pero también estoy un poco temeroso que puede ser un muro en alguna parte a lo largo de la ruta de acceso que no ofrece ninguna solución. Si alguien tiene algunas buenas ideas sobre esto, por favor tome nota de las observaciones o Enviarme un correo electrónico.
Gráficos verticales:
Este es un gráfico de barras horizontal. Es ciertamente posible crear un gráfico vertical. Sólo tenemos que cambiar a la HTML. Empezaría de la misma manera: Crear una representación de HTML de un gráfico de barras vertical y luego averiguar cómo conseguirlo vía XSL. Si alguien está interesado en, Pude convencí a probar y trabajar las torceduras. Si alguien ya ha hecho, por favor hágamelo saber y con mucho gusto voy enlace a tu blog 🙂
Creo que el desafío con un gráfico vertical es que las etiquetas de la gráfica son más difíciles de administrar, pero ciertamente no es imposible.
Campo nombre Gotcha:
Hay al menos dos cosas a buscar con los nombres de campo.
Primero, un nombre de campo con un espacio tiene que ser escapado en el XSL. Probablemente se trata de una cuestión:
<XSL:variable nombre="totalProposed"
Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@Status) = 'Propuesto'])" />
Si tu estado"" columna realmente es llamado "código de Estado" a continuación, debe hacer referencia a él como "Status_x0020_Code":
<XSL:variable nombre="totalProposed"
Seleccione="Conde(/dsQueryResponse/filas/fila[espacio de normalizar(@ Status_x0020_Code) = 'Propuesto'])" />Segundo, y me siento un poco borroso en este, pero también hay que estar alerta para los cambios de nombre de campo. Si llama a su campo "código de estado" y más tarde en, cámbiele el "Estado de AFE", el nombre interno"" no cambia. El nombre interno seguirá siendo "código de estado" y debe hacer referencia como "Status_x0020_Code". Los "otros recursos" enlaces pueden ayudar a diagnosticar y corregir este tipo de problema.
Acerca de ese Color:
Elegí "rojo" porque es agradable a mí en el momento. No sería una gran cosa para mostrar diferentes colores para dar más que una descripción visual de un número, sino también proporcionar un KPI útil. Por ejemplo, Si el porcentaje de "estancado" AFE es > 10% a continuación mostramos rojo, de lo contrario, mostrarlo en negro. Uso <XSL:Elija> para lograr esto.
Otros recursos:
- Determinar el nombre interno (y otra buena info) para los datos en una lista: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Mostrar todos los datos proporcionados por SharePoint (el XML sin procesar): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Obtener la expresión XPATH de una columna específica: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Otro enfoque mediante OWA(?). Yo no he cavado en ella, pero parece prometedora, especialmente para los gráficos circulares: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Transformar feliz!
<final />