Ir para o conteúdo

Publicidade

 Estatísticas do Fórum

  • 0 Usuários ativos

    0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Cursos Online iMasters
Foto:

[Resolvido] Grafico de barras empilhadas

  • Por favor, faça o login para responder
Não há respostas para este tópico

#1 xanburzum

xanburzum
  • Membros
  • 11.580 posts

Postado 22 abril 2011 - 12:19

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 & "&nbsp;&nbsp;" ' 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 %>&nbsp;</TD>
                    </TR>
                    <TR>
                        <TD VALIGN="bottom" ALIGN="right">0&nbsp;</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




Publicidade

/ins>