Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

xanburzum

[Resolvido] Grafico de barras empilhadas

Recommended Posts

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
%>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.