Criar gráficos de barras no SharePoint

Visão geral:

(ATUALIZAÇÃO 12/04/07: Adicionado um outro recurso interessante no final ligando para outro blog que aborda esta via uma parte muito interessante do web)

Esta entrada de blog descreve como criar um gráfico de barras no SharePoint. Isso funciona em ambientes WSS e o MOSS como depende apenas do web part de exibição de dados.

A abordagem geral é a seguinte:

  1. Criar uma lista ou biblioteca de documentos que contém os dados que você deseja gráfico.
  2. Lugar da biblioteca de documento associado / personalizado lista em uma página e convertê-lo em uma web part de exibição de dados (DVWP).
  3. Modificar XSL do DVWP para gerar HTML que mostra como um gráfico.

Cenário de negócios / Instalação:

Eu criei uma lista personalizada com a coluna de título padrão e uma coluna adicional, "Status". Este modelos (muito simplista) uma "autorização de despesa" cenário onde o título representa o projeto e o Status de um valor da lista de:

  • Propõe-se
  • No processo de
  • Parado

O objetivo é produzir um gráfico de barras horizontal interativo que mostra esses códigos de status.

Eu ter preenchido a lista e parece que isso:

imagem

Criar a Web Part de exibição de dados:

Criar o DVWP adicionando a lista personalizada para uma página (página do site no meu caso) e siga as instruções here (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Além de simplesmente criar o DVWP, Precisamos também definir a propriedade de paginação para mostrar todas as linhas disponíveis. Para mim, Isto é algo como isto:

imagem

Neste ponto, Eu sempre fecho SPD e o navegador. Então re-abrir a página usando o navegador. Isso evita que acidentalmente estragar o layout de parte da web na página.

Modificar o XSLT:

Agora é hora de modificar o XSLT.

Sempre usar visual studio para isso. (Consulte here para uma nota importante sobre intellisense que irá ajudá-lo muito).

Criar um projeto vazio adicionar quatro novos arquivos (substituindo as palavras "Original" e "nova" conforme o caso):

  • Original.XSLT
  • New.XSLT
  • Etcconfig_datadeployment original
  • Nova etcconfig_datadeployment

No meu caso, Ele se parece com isso:

imagem

Modificar a web part e copiar o params e XSL para o Original"" versão em Visual Studio.

O objetivo aqui é fazer com que o XSL transformar os resultados de que voltarmos da consulta DVWP em HTML que processa como um gráfico.

Para este fim., ajuda a primeiro considerar o que o HTML deve olhar como antes nós ficar confuso pela loucura que é conhecida como "XSL". (Para ser claro, é simplesmente um exemplo; não digitar ou copiar/colar em visual studio. Eu forneço um golpe completo, ponto de partida para que mais tarde no write-up). O gráfico de exemplo a seguir é processado conforme o HTML imediatamente após:

Exemplo de Gráfico de Barras

HTML correspondente:

<HTML>
<corpo>
<Centro>
<largura da tabela = 80%>
<TR><TD><Centro>Gráfico de barras horizontais</TD></TR>
<TR>
<TD align = "center">
<borda de tabela = "1" largura = 80%>
<TR>
<TD largura = 10%>Aberto</TD>
<TD><tabela cellpadding ="0" CellSpacing ="0" border = 0 width = 50%><TR bgcolor = vermelho><TD>&nbsp;</TD></TR></tabela></TD>
</TR>
<TR>
<TD largura = 10%>Fechado</TD>
<TD><tabela cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = vermelho><TD>&nbsp;</TD></TR></tabela></TD>
</TR>
<TR>
<TD largura = 10%>Parado</TD>
<TD><tabela cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = vermelho><TD>&nbsp;</TD></TR></tabela></TD>
</TR>
</tabela>
</TD>
</TR>
</tabela>
</corpo>
</HTML>

Eu usei uma abordagem absolutamente simples para criar minhas barras definindo a cor de fundo de uma linha para "red".

Trata-se aqui o Take-Away: No final, todos nós estamos fazendo é criar o HTML com linhas e colunas.

Modelo XSLT:

Eu copiei o XSLT que gera um gráfico de barras horizontal. É razoavelmente bem para não adicionar muito aqui exceto para estas notas, comentou:

  • Eu comecei com o padrão XSL que me deu quando eu criei primeiro a DVWP SharePoint Designer.
  • Eu era capaz de reduzir este partir do SPD 657 linhas de 166 linhas.
  • Eu não mexer com o arquivo XML de parâmetros (que é separado do XSL e você saberá o que quero dizer quando você vai para modificar o DVWP em si; Existem dois arquivos que você pode modificar). No entanto, a fim de simplificar as coisas, Para remover quase todos eles de XSL. Isto significa que se você quiser fazer uso desses parâmetros, Você só precisa adicionar suas definições de variável para o XSL. Isso vai ser fácil, pois você terá as definições de variável XSL originais em seu projeto visual studio.
  • Você precisa ser capaz de copiar e cole-o diretamente no seu projeto visual studio. Em seguida, remover minhas ligações e inserir suas próprias chamadas para "ShowBar".
  • A broca para baixo funciona através da criação de um <a href> Assim: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Esta técnica pode ser de valor em outros contextos. Em primeiro lugar, Eu pensei que eu precisaria de acordo com um formato mais complexo: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, Mas em meu ambiente que não é necessário. URL a lista é passado para pelo SharePoint, então isso é muito fácil generalizar.

Aqui é...:

<XSL:StyleSheet Versão="1.0" excluir-resultado-prefixos="RS z ó s ddwrt dt msxsl" 
xmlns:msxsl="urn:Esquemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/TR/1998/REC-xml-19980210 1999/XSL/Transform"
xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:ASP="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:ó="urn:Esquemas-microsoft-com:escritório" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urn:Esquemas-microsoft-com:conjunto de linhas" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urn:FrontPage:interno"
> <XSL:saída Método="HTML" travessão="Não" /> <XSL:decimal-formato NaN="" /> <XSL:param nome="ListUrlDir"></XSL:param> <!-- Preciso disto para apoiar um aprofundamento. --> <XSL:modelo correspondência="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <XSL:variável nome="dvt_StyleName">Tabela</XSL:variável> <XSL:variável nome="Linhas" Selecione="/dsQueryResponse/linhas/linha" /> <XSL:variável nome="dvt_RowCount" Selecione="contagem($Linhas)" /> <XSL:variável nome="IsEmpty" Selecione="$dvt_RowCount = 0" /> <XSL:variável nome="dvt_IsEmpty" Selecione="$dvt_RowCount = 0" /> <XSL:Escolha> <XSL:Quando teste="$dvt_IsEmpty"> Não há dados para o gráfico!<br/> </XSL:Quando> <XSL:caso contrário> <!-- As coisas interessantes começam aqui. Precisamos definir um par de variáveis para cada linha no gráfico: número total de itens e por cento do total. --> <XSL:variável nome="totalProposed" Selecione="contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status) = 'Proposta'])" /> <XSL:variável nome="percentProposed" Selecione="$totalProposed div $dvt_RowCount" /> <XSL:variável nome="totalInProcess" Selecione="contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status) = 'Em processo'])" /> <XSL:variável nome="percentInProcess" Selecione="$totalInProcess div $dvt_RowCount" /> <XSL:variável nome="totalStalled" Selecione="contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status) = 'Parado'])" /> <XSL:variável nome="percentStalled" Selecione="$totalStalled div $dvt_RowCount" /> <!-- Definimos nossa tabela HTML aqui. Eu peguei emprestado de alguns estilos padrão do SharePoint aqui para torná-lo coerente. Acho que isso honrará as alterações para o arquivo css global bem como tema substitui. --> <tabela Largura="100%" CellSpacing="0" CellPadding="2" estilo="fronteira-direito: 1 #C0C0C0 sólido; beira-parte inferior: 1 #C0C0C0 sólido; border-left-style: sólidos; border-left-width: 1; border-top-style: sólidos; border-top-width: 1;"> <TR> <TD alinhar="Centro"> <tabela fronteira="1" Largura="100%"> <!-- Para cada Estado que nós queremos fazer um gráfico, Nós chamamos o "ShowBar" modelo. Que passa por ela: 1. Um rótulo para a linha. Isso é transformado em um hiperlink. 2. Os por cento (variável de cima). 3. O nome do campo real do código da lista subjacente. Isto não precisa corresponder ao rótulo de exibição. 4. Valor do campo correspondente para #3. 5. Total de itens deste código de status (Não o total geral de todos os códigos de status). Ele emite um <TR></TR> e a linha do gráfico de barras horizontais. Nós chamamos este modelo para cada código de status, que queremos ver os. --> <XSL:modelo de convite nome="ShowBar"> <XSL:com-param nome="BarDisplayLabel" Selecione="'Proposta'"/> <XSL:com-param nome="BarPercent" Selecione="$percentProposed"/> <XSL:com-param nome="QueryFilterFieldName" Selecione="'Status'"/> <XSL:com-param nome="QueryFilterFieldValue" Selecione="'Proposta'"/> <XSL:com-param nome="TotalItems" Selecione="$totalProposed"></XSL:com-param> </XSL:modelo de convite> <XSL:modelo de convite nome="ShowBar"> <XSL:com-param nome="BarDisplayLabel" Selecione="'Parado'"/> <XSL:com-param nome="BarPercent" Selecione="$percentStalled"/> <XSL:com-param nome="QueryFilterFieldName" Selecione="'Status'"/> <XSL:com-param nome="QueryFilterFieldValue" Selecione="'Parado'"/> <XSL:com-param nome="TotalItems" Selecione="$totalStalled"></XSL:com-param> </XSL:modelo de convite> <XSL:modelo de convite nome="ShowBar"> <XSL:com-param nome="BarDisplayLabel" Selecione="'Em processo'"/> <XSL:com-param nome="BarPercent" Selecione="$percentInProcess"/> <XSL:com-param nome="QueryFilterFieldName" Selecione="'Status'"/> <XSL:com-param nome="QueryFilterFieldValue" Selecione="'Em processo'"/> <XSL:com-param nome="TotalItems" Selecione="$totalInProcess"></XSL:com-param> </XSL:modelo de convite> </tabela> </TD> </TR> </tabela> </XSL:caso contrário> </XSL:Escolha> </XSL:modelo> <!-- Este modelo faz o trabalho de exibir linhas individuais no gráfico de barras. Você provavelmente vai fazer a maioria de seus ajustes aqui. --> <XSL:modelo nome="ShowBar"> <XSL:param nome="BarDisplayLabel" /> <!-- rótulo para mostrar --> <XSL:param nome="BarPercent"/> <!-- Por cento do total. --> <XSL:param nome="QueryFilterFieldName"/> <!-- Usado para saltar para a consulta & filtro --> <XSL:param nome="QueryFilterFieldValue"/> <!-- Usado para saltar para a consulta & filtro --> <XSL:param nome="TotalItems" /> <!-- contagem total desta barlabel --> <TR> <!-- O bar em si rotular. --> <TD Classe="MS-formbody" Largura="30%"> <!-- Este set de instruções cria uma seqüência de caracteres de consulta que permite-nos detalhar uma exibição filtrada dos dados subjacentes. Fazemos uso de umas coisas aqui: 1. Podemos fazer FilterField1 e FilterValue1 para uma lista para filtrar uma coluna. 2. SharePoint é passar um parâmetro chave para nos, ListUrlDir que aponta para a lista subjacente contra o qual este DVWP está "em execução". Não é divertido XSL? --> <XSL:texto desativar-saída-saída="Sim"> <![CDATA[<um href ="]]></XSL:texto> <XSL:valor da Selecione="$ListUrlDir"/> <XSL:texto desativar-saída-saída="Sim"><![CDATA[?FilterField1 =]]></XSL:texto> <XSL:valor da Selecione="$QueryFilterFieldName"/> <XSL:texto desativar-saída-saída="Sim"><![CDATA[&FilterValue1 =]]></XSL:texto> <XSL:valor da Selecione="$QueryFilterFieldValue"/> <XSL:texto desativar-saída-saída="Sim"><![CDATA[">]]></XSL:texto> <XSL:valor da Selecione="$BarDisplayLabel"/> <XSL:texto desativar-saída-saída="Sim"><![CDATA[</uma>]]></XSL:texto> <!-- A próxima cena mostra alguns números no formato: "(total / % do total)" --> (<XSL:valor da Selecione="$TotalItems"/> / <!-- Isso cria uma etiqueta bonita por cento para nós. Obrigado, Microsoft! --> <XSL:modelo de convite nome="percentformat"> <XSL:com-param nome="por cento" Selecione="$BarPercent"/> </XSL:modelo de convite>) </TD> <!-- Finalmente, emitir um <TD> marca para o bar em si.--> <TD> <tabela CellPadding="0" CellSpacing="0" fronteira="0" Largura="{rodada($BarPercent * 100)+1}%"> <TR bgcolor="vermelho"> <XSL:texto desativar-saída-saída="Sim"><![CDATA[&nbsp;]]></XSL:texto> </TR> </tabela> </TD> </TR> </XSL:modelo> <!-- Isto é tirado diretamente de alguns XSL que encontrei em um modelo de MS. --> <XSL:modelo nome="percentformat"> <XSL:param nome="por cento"/> <XSL:Escolha> <XSL:Quando teste="formato-número($por cento, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:Quando> <XSL:caso contrário> <XSL:valor da Selecione="formato-número($por cento, '#,##0%;-#,##0%')" /> </XSL:caso contrário> </XSL:Escolha> </XSL:modelo> </XSL:StyleSheet>

Os resultados:

O XSL de cima gera este gráfico:

imagem

Detalhar os dados subjacentes, clicando sobre o código de status:

imagem

Pensamentos finais:

Isto pode ser generalizado?

Eu amo este conceito gráfico, Mas eu odeio o fato de que eu tenho que entrar e fazer tanta mão-codificação. Pensei um pouco para se pode ser generalizada e estou otimista, Mas também estou um pouco temeroso de que pode haver uma parede de tijolos em algum lugar ao longo do caminho que não oferece qualquer forma de contornar. Se alguém tiver ideias sobre este, por favor faça uma nota nos comentários ou correio eletrónico a mim.

Gráficos verticais:

Este é um gráfico de barras horizontal. É certamente possível criar um gráfico vertical. Só precisamos alterar o HTML. Eu começaria da mesma forma: Criar uma representação de HTML de um gráfico de barras vertical e então descobrir como conseguir isso através de XSL. Se alguém estiver interessado em que, Eu poderia ser persuadido para experimentá-lo e trabalhar as arestas. Se alguém já fez isso, por favor, deixe-me saber e terei prazer em vincular ao seu blog 🙂

Acho que o desafio com um gráfico vertical é que os rótulos de gráfico são mais difíceis de gerenciar, Mas certamente não é impossível.

Do campo nome Gotcha:

Há pelo menos duas coisas para procurar com seus nomes de campo.

Primeira, um nome de campo com um espaço tem que ser antecedidas na XSL. Este provavelmente será um problema aqui:

        <XSL:variável nome="totalProposed" 
Selecione="contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status) = 'Proposta'])" />

Se seu Status"" coluna na verdade é chamada "código de Status" Então você precisa fazer referência a ele como "Status_x0020_Code":

   <XSL:variável nome="totalProposed" 
Selecione="contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status_x0020_Code) = 'Proposta'])" />

Segundo, e estou um pouco confuso com isto, Mas você também precisa estar alerta para alterações de nome de domínio. Se o nome de seu campo "código de Status" e, posteriormente, na, Renomeie-o para "AFE Status", o nome"interno" Não muda. O nome interno ainda será o código de Status"" e deve ser referenciada como "Status_x0020_Code". Os "outros recursos" links podem ajudar a diagnosticar e corrigir esse tipo de problema.

Sobre essa cor:

Eu escolhi "vermelho" Porque é agradável para mim no momento. Não seria um grande negócio para mostrar cores diferentes a fim de fornecer mais do que apenas uma descrição visual de um número, Mas também fornecer um KPI útil. Por exemplo, se a percentagem de "parado" AFE é > 10% em seguida, mostrar vermelho, caso contrário, mostrá-lo em preto. Utilização <XSL:Escolha> para realizar essa tarefa.

Outros recursos:

Transformando feliz!

<final />

Subscreva ao meu blog!

17 pensamentos "Criar gráficos de barras no SharePoint

  1. Chris B

    Esta página quase concluída a tarefa que eu estava procurando.

    Eu tenho um grupo que quer usar a lista de pesquisa do SharePoint para criar uma enquete semanal. A captura? Eles não querem ver o código… Ou mudar o sistema cada vez que enviam a enquete (planejado para uma atualização semanal).

    Eu era capaz de conectar-se a esta para a lista de pesquisa e criar o gráfico na primeira coluna resposta. Mas não posso prever o que são os valores e rótulos que precisam seguir em frente. Para tornar as coisas piores tenham mais ou menos respostas disponíveis cada semana.

    Vou olhar em outro lugar só para o caso, Mas alguém já encontrou uma maneira de criar linhas e rótulos baseados fora o número de opções disponíveis e dinamicamente definir estas ao invés de codificação duramente os valores esperados?

    Resposta
  2. Greg Laushine

    Obrigado Paul. Muito útil. Graças ao seu trabalho., Eu era capaz de adicionar uma coluna de barra do gráfico de uma existente DVWP (EG. para tarefas) muito facilmente com apenas algumas linhas de seu código.
    No SharePoint Designer, Inseri uma exibição de dados com o título e % Complete as colunas de uma lista de tarefas. Eu coloque o cursor em uma das células e clique direito. Eu selecione Inserir uma coluna à direita. Na visualização de código, Eu encontrei o <TD> e substituiu a <XSL:elemento de texto dentro da célula com o seu código:
    <tabela cellpadding ="0" CellSpacing ="0" fronteira ="0"
    largura = "{rodada(@PercentComplete * 100)+1}%">
    <estilo TR = "background-color:vermelho">
    <XSL:texto desativar-saída-saída = "Sim"><![CDATA[&nbsp;]]></XSL:texto>
    </TR>
    </tabela>

    Nota que eu mudei o código de cor de linha do bgcolor = "red" a style = "background-color:vermelho"
    Também, era capaz de selecionar uma das colunas na minha lista (@PercentComplete) no lugar de $BarPercent""
    Greg

    Resposta
  3. Wolfgang
    Paulo, Obrigado por isso! Eu criei uma cópia exata do que fez e funciona quase perfeito. Havia um pequeno problema na linha do parágrafo 2º do código:
    <XSL:modelo Coincidir = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Depois que eu corrigi isso funciona como um encanto! Agora isto adaptará a minha própria lista e status, mas tenho certeza que não será muito difícil. (Vou postar o resultado)
    Obrigado novamente
    ~ Wolle
    Resposta
  4. Sem nome
    pergunta –
    E se no meu gráfico, Eu queria uma variável que não apenas contar um status mas contar orgasmos múltiplos?
    Assim, por exemplo, se eu tivesse —
    <XSL:nome da variável = "RequestsInitialized"
    Selecione = "contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status)= 'WIP'])" />
    –A coisa é, Eu quero contar ocorrências de 'WIP', Mas eu também quero essa variável para contar algo mais como 'Revisão pendente'.. como eu faria isso?
    Obrigado!
    Resposta
  5. Murty Srirangam
    Oi Paulo,
    Eu sou realmente, este é realmente um grande esforço por você. Pode me explicar onde eu ia postar esse código. Eu criei um prjoect com quatro novos arquivos. Então pode explicar mais detalhadamente o que devo fazer.
    Obrigado
    Juca Silva
    Resposta
  6. Andrew Carrington
    Oi, Estou a tentar modificar este ligeiramente para que ele exibe um gráfico de tarefas em uma lista de tarefa contra informações de usuário. Ele usa uma coluna chamada @AssignedTo que é uma coluna de presença do usuário. Pode obtê-lo para exibir o HTML renderizado, mas não pode obtê-lo para calcular e exibir valores.
    Todas as idéias?
    Obrigado
    Andy
    Resposta
  7. Patrik Luca escreveu:
    Oi Paulo,
    Ótimo post!
    Uma pergunta:
    Eu gostaria de filtrar em dois campos ao mesmo tempo: como isto pode ser conseguido?
    Por exemplo, uma das suas variáveis é chamada totalStalled e filtra na @Status.
    Eu gostaria de ao mesmo tempo reduzir o meu número de registros retornados em outro campo de filtro.
    Já descobri como fazer um 'OR', Mas eu donnot conseguir encontrar o ' e’
    Um ' ou’ pode ser alcançado como este:
    <XSL:nome da variável = "totalStalled" Selecione = "contagem(/dsQueryResponse/linhas/linha[Normalizar-espaço(@Status) = 'Parado'] | /dsQueryResponse/linhas/linha[Normalizar-espaço(@ExtraFilterField) = 'valor'])" />
    Resposta
  8. Robin Meuré

    Oi Paulo!

    Bom trabalho! Eu também tinha algo assim em mente para visualizar as listas do SharePoint de forma gráfica 😉

    Resposta
  9. Frank

    Eu tenho um ‘Usando Painéis no SharePoint’ pergunta. Somos um hospital militar usando o padrão MOSS para nossa Intranet e gostaríamos de construir um painel para nosso Grupo de Comando para ver 'em tempo real’ se possível. Um dos principais pontos está exibindo a carga de trabalho atual em tempo real no interior da instalação e vê-lo literalmente mudar para cima e para baixo (pode ter que clicar “atualização”/F5).

    Obrigado antecipadamente,

    Resposta

Deixar uma resposta

seu endereço de e-mail não será publicado. Campos obrigatórios são marcados *