Publicidade

xanburzum

[Resolvido] Grafico de barras empilhadas

Um gráfico de barras empilhadas com várias cores. Usando uma cor diferente para cada stacks e cada stacks terá sua Tool Tip própria também! Basta passar uma matriz com suas cores, uma para cada bar. As cores são especificadas por nome, o nome de cada cor corresponde a um spacer, um arquivo de imagem gif que é dinamicamente ligado ao atributo de marca IMG SRC através do nosso código asp. Certifique-se de colocar esses arquivos na pasta / images.

 

<%

Sub ShowStackedBarChart(ByRef aValues, ByRef aLabels, ByRef strTitle, _
   ByRef strXAxisLabel, ByRef strYAxisLabel, ByRef aColors, ByRef aToolTip, ByRef aBars)

   ' definir constantes
   ' Todas as unidades são em pixels da tela
   Const GRAPH_WIDTH  = 400  ' A largura do body do gráfico
   Const GRAPH_HEIGHT = 300  ' A altura do body do gráfico
   Const GRAPH_BORDER = 4    ' O tamanho da borda preta
   Const GRAPH_SPACER = 2    ' O tamanho do espaço entre as barras

   Const TABLE_BORDER = 0
   'Const TABLE_BORDER = 10

   ' Declarar asr variaveis
   Dim i, ii, iTmp, aTmp()
   Dim iMaxValue
   Dim iBarWidth
   Dim iBarHeight
   Dim strColumnColor

   ' Obtenha o valor máximo do conjunto de dados
   iMaxValue = 0
   For I = 0 To UBound(aValues)
       If iMaxValue < aValues(I) Then iMaxValue = aValues(I)
   Next

   If iMaxValue  = 0 Then Exit Sub
   'Response.Write iMaxValue & "  " ' Debugging line

   ReDim Preserve aTmp(UBound(aColors))

' Calcular a largura das barras
'Largura total e dividir pelo número de itens.

   iBarWidth = (GRAPH_WIDTH \ (UBound(aValues) + 1)) - GRAPH_SPACER
   'Response.Write iBarWidth ' Debugging line

   ' Começar a desenhar o gráfico
   %>
   <TABLE BORDER="<%= TABLE_BORDER %>" CELLSPACING="0" CELLPADDING="0">
       <TR>
           <TD COLSPAN="3" ALIGN="center"><H2><%= strTitle %></H2></TD>
       </TR>
       <TR>
           <TD VALIGN="center"><B><%= strYAxisLabel %></B></TD>
           <TD VALIGN="top">
               <TABLE BORDER="<%= TABLE_BORDER %>" CELLSPACING="0" CELLPADDING="0">
                   <TR>
                       <TD ROWSPAN="2">
                           <IMG SRC="./images/spacer.gif" BORDER="0"
                               WIDTH="1" HEIGHT="<%= GRAPH_HEIGHT %>">
                       </TD>
                       <TD VALIGN="top" ALIGN="right"><%= iMaxValue %> </TD>
                   </TR>
                   <TR>
                       <TD VALIGN="bottom" ALIGN="right">0 </TD>
                   </TR>
               </TABLE>
           </TD>
           <TD>
               <TABLE BORDER="<%= TABLE_BORDER %>" CELLSPACING="0" CELLPADDING="0">
                   <TR>
                       <TD VALIGN="bottom"><IMG SRC="./images/spacer_black.gif"
                           BORDER="0"
                           WIDTH="<%= GRAPH_BORDER %>"
                           HEIGHT="<%= GRAPH_HEIGHT %>"></TD>
                       <%
                       ' Estamos agora no corpo do gráfico.
'Loop através dos dados que mostram as barras!
                       For I = 0 To UBound(aValues)
                           iBarHeight = Int((aValues(I) / iMaxValue) * GRAPH_HEIGHT)

                           ' ignorar um 0 como uma dimensão da imagem!
                           If iBarHeight = 0 Then iBarHeight = 1
                           %>
                           <TD VALIGN="bottom"><IMG SRC="./images/spacer.gif"
                               BORDER="0"
                               WIDTH="<%= GRAPH_SPACER %>"
                               HEIGHT="1"></TD>
                           <TD VALIGN="bottom"><%   
                               For ii = UBound(aColors) - 1 To 0 Step - 1
                                   aTmp(ii) = Int((aBars(ii+1,I) / iMaxValue) * GRAPH_HEIGHT)
                                   %><IMG SRC="./images/spacer_<%= aColors(ii) %>.gif"
                                   BORDER="0" WIDTH="<%= iBarWidth %>"
                                   HEIGHT="<%= aTmp(ii) %>"
                                   ALT="<%= aBars(ii + 1, I) & vbTab & aToolTip(ii) %>"><br /><% 
                               Next 'ii
                           %></TD><%                               
                       Next 'I
                       %>
                   </TR>
               </TABLE>
               <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">

                   <TR>
                       <TD COLSPAN="<%= (UBound(aValues) + 1) %>"><IMG SRC="./images/spacer_black.gif"
                           WIDTH="<%= GRAPH_BORDER + ((UBound(aValues) + 1) * (iBarWidth + GRAPH_SPACER)) %>"
                           HEIGHT="<%= GRAPH_BORDER %>" BORDER="0"></TD>
                   </TR>
                       <%
                       ' a label array é opcional e só é realmente útil
'para pequenos conjuntos de dados com label´s muito curta!
                       %>
                       <% If IsArray(aLabels) Then %>
                           <TR>
                           <% For I = 0 To UBound(aValues)
                               iTmp = (GRAPH_BORDER + ((UBound(aValues) + 1) * _
                                   (iBarWidth + GRAPH_SPACER))) / (UBound(aValues) +1)
                               iTmp = Int(Round(iTmp))
                               %>
                               <TD WIDTH="<%= iTmp %>" ALIGN="center"><FONT SIZE="2"><%= aLabels(I) %></FONT></TD>
                           <% Next 'I %>
                           </TR>
                       <% End If %>
               </TABLE>
           </TD>
       </TR>
   </TABLE>
   <%
End Sub

' Aqui está o exemplo de código a partir de uma aplicação real,
' vamos usar os dados estáticos para a nossa amostra.

' Para este exemplo nosso gráfico será cinco colunas
' e quatro stacks
Dim i, ii, iNumSensors, iNumStates
Dim aValues(), aLabels(), aTooltip(), aColors(), aBars()

iNumSensors = 5
iNumStates = 4
ReDim Preserve aValues(iNumSensors)
ReDim Preserve aLabels(iNumSensors)
ReDim Preserve aTooltip(iNumStates)
ReDim Preserve aColors(iNumStates)

' Criar a barra do array uma linha por sensor
ReDim Preserve abars(iNumStates,iNumSensors)
For i = 0 to Ubound(abars,1)
  For ii = 0 to Ubound(abars,2)
     abars(i,ii) = 0
  Next 'ii
Next 'i

' definir a altura total de cada coluna         
aValues(0) = 5
aValues(1) = 171
aValues(2) = 62
aValues(3) = 66
aValues(4) = 87
aValues(5) = 391

' definir os dados para as barras          
aBars(0,0) = 1
aBars(0,1) = 1
aBars(0,2) = 1
aBars(0,3) = 1
aBars(0,4) = 1
aBars(0,5) = 5

aBars(1,0) = 32
aBars(1,1) = 112
aBars(1,2) = 6
aBars(1,3) = 11
aBars(1,4) = 10
aBars(1,5) = 171

aBars(2,0) = 6
aBars(2,1) = 18
aBars(2,2) = 4
aBars(2,3) = 14
aBars(2,4) = 20
aBars(2,5) = 62

aBars(3,0) = 13
aBars(3,1) = 0
aBars(3,2) = 10
aBars(3,3) = 13
aBars(3,4) = 30
aBars(3,5) = 66

aBars(4,0) = 10
aBars(4,1) = 7
aBars(4,2) = 30
aBars(4,3) = 0
aBars(4,4) = 40
aBars(4,5) = 87

' definir os rótulos para o gráfico          
aLabels(0) = "S1"
aLabels(1) = "S2"
aLabels(2) = "S3"
aLabels(3) = "S4"
aLabels(4) = "S5"
aLabels(5) = "Total"

' definir as cores do gráfico
aColors(0) = "red"
aColors(1) = "blue"
aColors(2) = "yellow"
aColors(3) = "lime"

' definir as Tool Tips para o gráfico 
aTooltip(0) = "Critical"
aTooltip(1) = "Serious"
aTooltip(2) = "Routine"
aTooltip(3) = "Cleared"

' Esta é a linha que chama a função para exibir o gráfico
ShowStackedBarChart aValues, aLabels, "Sensor Summary", "Sensor ID", "N", aColors, aTooltip, aBars
%>

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora

  • Próximos Eventos