none
Chart Control - Mostrar o marker de um ponto com uma imagem diferente RRS feed

  • Pergunta

  • Salve!

    Aplicação Web com VS2010.

    Há um webform em que uso o MS Chart Control .Net 4.0. Com ele eu mostro um gráfico que tem 3 séries do tipo Line. Todas as séries têm as mesmas propriedades, à exceção da cor.

    As séries são preenchidas como o código abaixo:

    For Each torre As Torre In lstTorres
        cht1.Series("C").Points.AddXY(torre.dist, torre.FaseC)
        cht1.Series("B").Points.AddXY(torre.dist, torre.FaseB)
        cht1.Series("A").Points.AddXY(torre.dist, torre.FaseA)
    Next

    Após gerar os pontos eu preencho os labels e as tooltips somente dos pontos da série "B":

    For i As Int16 = 0 To cht1.Series("B").Points.Count - 1
        cht1.Series("B").Points(i).Label = lstTorres.Item(i).numOperacao
        cht1.Series("B").Points(i).LabelToolTip = " Tipo: " + lstTorres.Item(i).tipo + " \n Vão: " + lstTorres.Item(i).vao.ToString() + "m "
    Next

    Depois disso eu incluo mais um ponto à série "B".

    cht1.Series("B").Points.AddXY(distancia, oOcorrencia.torreProvavel.FaseB)

    Então, esse é o último ponto da série. Este é o ponto que quero mostrar com um marker  diferente. Tenho uma imagem (com fundo transparente) em um arquivo .png na pasta Imagens. Daí tentei o seguinte::

    Dim lastPoint As Int16 = cht1.Series("B").Points.Count - 1
    cht1.Series("B").Points(lastPoint).MarkerStyle = MarkerStyle.None
    cht1.Series("B").Points(lastPoint).MarkerImage = "~/Imagens/Raio.png"

    Também tentei desse modo:

    Dim lastPoint As Int16 = cht1.Series("B").Points.Count - 1
    cht1.Series("B").Points(lastPoint).MarkerStyle = MarkerStyle.None
    cht1.Series("B").Points(lastPoint).MarkerImage = "../Imagens/Raio.png"

    Nenhum dos modos funcionou. Este último ponto nunca é mostrado.

    Agora, se eu não faço qualquer menção ao MarkerImage o ponto é mostrado com o mesmo marker definido para todos os pontos.

    Como conseguir isso?

    Grato pela atenção de todos.

    Paulo Ricardo Ferreira


    • Editado PRicardo Ferreira terça-feira, 26 de fevereiro de 2013 19:11 mais detalhes
    terça-feira, 26 de fevereiro de 2013 13:15

Respostas

  • Salve!

    De tanto procurar acabei achando uma solução que, a meu ver, nem é a mais lógica, mas que atendeu às minhas necessidades.

    Ao invés de usar a propriedade MarkerImage para o último ponto da série como descrito nos dois últimos blocos de código do post original, eu usei o objeto Annotation do controle ChartControl.

    Fiz o seguinte: no source eu incluí o Annotation conforme o código abaixo:

    <asp:Chart ID="cht1" runat="server" Width="952px" Height="230px" BackColor="Silver" BorderlineColor="#496077" >
        <Series>
            <asp:Series Name="C" ChartType="Line" Color="Blue" MarkerSize="7" MarkerStyle="Triangle" IsValueShownAsLabel="false" XValueType="Single" LegendText="Fase C" IsVisibleInLegend="true" Legend="Legenda"/>
            <asp:Series Name="B" ChartType="Line" Color="White" MarkerSize="7" MarkerStyle="Triangle" IsValueShownAsLabel="false" XValueType="Single" LegendText="Fase B" IsVisibleInLegend="true" Legend="Legenda" Font="Microsoft Sans Serif, 8pt, style=Bold" LabelForeColor="Yellow"/>
            <asp:Series Name="A" ChartType="Line" Color="Red" MarkerSize="7" MarkerStyle="Triangle" IsValueShownAsLabel="false" XValueType="Single" LegendText="Fase A" IsVisibleInLegend="true" Legend="Legenda"/> 
        </Series>
        <Annotations>
            <asp:ImageAnnotation Name="PontoDaFalha" Image="../Imagens/Raio.png" AnchorAlignment="MiddleCenter" Height="8" Width="1.5" ToolTip=" Ponto da falha "/>
        </Annotations>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1" BackColor="Silver">
                <AxisX Title="Distância (km) -->>" TitleAlignment="Center" TitleForeColor="Black" TitleFont="Microsoft Sans Serif, 8pt, style=Bold" IntervalAutoMode="VariableCount">
                    <MajorGrid Enabled="true" LineColor="Silver" />
                    <MinorGrid Enabled="false" />
                    <MajorTickMark Enabled="true" />
                    <MinorTickMark Enabled="false" />
                </AxisX>
                <AxisY Title="Fases" Enabled="false" IsLabelAutoFit="False">
                </AxisY>
                <AxisX2 Enabled="False" />
                <AxisY2 Enabled="False" />
            </asp:ChartArea>
        </ChartAreas>
        <Titles>
            <asp:Title Font="Verdana, 12pt, style=Bold" Name="Title1" Text="Faseamento no trecho"/>
            </Titles>
            <Legends>
                <asp:Legend Title="Legenda" Name="Legenda" BackColor="Silver" Docking="Bottom" IsEquallySpacedItems="true" TitleAlignment="Center" Alignment="Far" TitleSeparator="DotLine"  />
            </Legends>
    </asp:Chart>
    

    O segredo está na definição das propriedades Height e Width para o ImageAnnotation. O detalhe é que o valor destas propriedades não é em pixel diretamente. Elas são proporcionais às dimensões do gráfico. Então, o que fiz foi testar alguns valores até chegar a valores que atendiam as minhas necessidades.

    Bem, no code-behind ficou assim:

    '// Inclui o ponto onde ocorreu a falha cht1.Series("B").Points.AddXY(distancia / 1000, oOcorrencia.torreProvavel.FaseB) Dim lastPoint As Int16 = cht1.Series("B").Points.Count - 1 cht1.Series("B").Points(lastPoint).MarkerStyle = MarkerStyle.None '// Configura a Annotation PontoDaFalha

    cht1.Annotations("PontoDaFalha").AnchorDataPoint = cht1.Series("B").Points(lastPoint) cht1.Annotations("PontoDaFalha").Visible = True

    Somente assim consegui mostrar aquele último ponto incluído na série (lastPoint) no gráfico com a imagem desejada.

    Grato pela atenção de todos.

    Paulo Ricardo Ferreira




    • Marcado como Resposta PRicardo Ferreira quarta-feira, 27 de fevereiro de 2013 16:47
    • Editado PRicardo Ferreira quarta-feira, 27 de fevereiro de 2013 17:06 correção ortográfica
    quarta-feira, 27 de fevereiro de 2013 16:46