Dezembro | 2007 | Espaço de Paul Galvin 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:

Criar uma lista ou biblioteca de documentos que contém os dados que você deseja gráfico.
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).
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:

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:

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:

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:

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> </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> </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> </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:

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

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:

Determinar o nome interno (e outras boas informações.) para os dados em uma lista: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Mostrar todos os dados fornecidos pelo SharePoint (o XML bruto): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Se a expressão XPATH de uma coluna específica: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Outra abordagem usando o OWA(?). Não escavei nela, Mas parece promissor, especialmente para gráficos de pizza: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Transformando feliz!

Subscreva ao meu blog!

Technorati Tags: SharePoint, DVWP, Web Part de exibição de dados, XSL, XSLT, WSS, MUSGO

Espaço de Paul Galvin SharePoint

arquivos Mensais: Dezembro 2007

Criar gráficos de barras no SharePoint