ASP.NET 4.0 Chart Control

watch_later 4 de abr de 2013


Hoje, eu vou tentar mostrar o uso de gráficos do ASP.NET 4.0.Com este controle gráfico, você pode construir gráficos sensacionais em poucos minutos.

O nosso ponto de partida é um criar um novo aplicativo da Web ASP.NET usando o Visual Studio 2010 ou usando o Visual Studio 2012

Implementar o controle em sua página


Se você abrir o seu default.aspx e olhar para a ToolBox (Caixa de Ferramentas) , você vai encontrar o Controle "Chart" na seção Data.




Se você arrastar o controle gráfico para o seu código ASP.NET, Visual Studio adiciona algumas configurações para o Web.config. Isso será feito automaticamente, da forma mostrada a seguir , isso é apenas uma explicação sobre as mudanças:

Alterações Web.config

Configurações ChartImage

No nó <appSettings> , a seguinte entrada será criado:

Handler ChartImage.axd

<add path="ChartImg.axd" verb="GET,HEAD,POST" 
type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" validate="false" />

O chartimage.axd é o principal componente do Controle Chart.O manipulador será chamado para cada imagem gerada.

Controle-definição

No nó <system.web> <pages> <controls>, a seguinte marca será adicionada:

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" 

assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture:neutral, 
PublicKeyToken=31bf3856ad364e35" />


add assembly="System.Web.DataVisualization, Version=4.0.0.0, 
Culture:neutral, PublicKeyToken=31bf3856ad364e35"/>

Elemento gráfico padrão na página aspx

Na página aspx, onde você arrastou o controle Chart, o Visual Studio irá adicionar um código padrão para o gráfico
<asp:Chart ID="Chart1" runat="server">

 <Series>
  <asp:Series Name="Series1">
  </asp:Series>
 </Series>
 <ChartAreas>
  <asp:ChartArea Name="ChartArea1">

  </asp:ChartArea>
 </ChartAreas>
</asp:Chart>

Construir um gráfico rapidamente

Antes de começar a usar o controle de gráfico, eu gostaria de explicar as propriedades Series e ChartAreas:


Series
A coleção Series deve conter um Controle <asp:Series> e esse controle pode ter 1 ou mais <Points>. Basicamente, para cada linha no gráfico (consistindo de múltiplos pontos de dados), um conjunto de dados é necessário.
Cada série pode ter a sua própria ChartType. Além disso, cada uma das series pode ser atribuído a qualquer ChartArea  cada série também pode ter o seu próprio processamento de propriedades (por exemplo cores, rótulos, etc.)
ChartAreasChartArea pode ter uma ou mais configurações que controlam o processamento de um gráfico.
Importante: Deve haver pelo menos um ChartArea definido para que o gráfico seja executado.

Agora nós sabemos que temos de adicionar um <asp:Series> na propriedade <series> que contém os <Points>. Também temos de ter a certeza de que existe pelo menos um <asp:ChartArea> no <ChartAreas> definido, caso contrário teríamos apenas uma imagem branca.

Depois de mudar o código de gráfico de controle para o seguinte:

<asp:Chart ID="cTestChart" runat="server">
 <Series>
  <asp:Series Name="Testing" YValueType="Int32">

   <Points>
    <asp:DataPoint AxisLabel="Test 1" YValues="10" />
    <asp:DataPoint AxisLabel="Test 2" YValues="20" />

    <asp:DataPoint AxisLabel="Test 3" YValues="30" />
    <asp:DataPoint AxisLabel="Test 4" YValues="40" />

   </Points>
  </asp:Series>
 </Series>
 <ChartAreas>
  <asp:ChartArea Name="ChartArea1">
  </asp:ChartArea>

 </ChartAreas>
</asp:Chart>

Vamos começar esta saída na página de saída processada:
Assim, termino o artigo aonde foi criado nosso primeira gráfico com sucesso.

Até a Próxima