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

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |