Microsoft Chart Controls ASP.NET 4.0
Quando o assunto era gráfico, freqüentemente precisávamos adotar algum componente de terceiros, o que acabava gerando maiores custos e falta de padronização em nossos projetos.
Entretanto com o Reporting Services 2008 tivemos melhoras significativas em termos de gráficos e possibilidades na plataforma Microsoft, ainda na versão 3.5 do .NET foi lançado um pacote com estes recusos de gráficos, disponibilizando-os para o ASP.NET e Win Form.
No .NET 3.5 o Microsoft Chart Controls era disponibilizado separado, por download que poderia ser feito em:
http://www.microsoft.com/downloads/en/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en#QuickDetails
Com o Visual Studio 2010 e o .NET Framework 4, este recuso já é disponibilizado nativamente.
Entre os diversos tipos de gráficos disponíveis escolhi o Gráfico de barras para utilizar como exemplo:
Vou fazer um gráfico de barras com os seguintes valores de números de acessos:
List<Acesso> acessos = new List<Acesso>();
acessos.Add(new Acesso { valor = 300, data = "01/08/2010"});
acessos.Add(new Acesso { valor = 340, data = "03/08/2010"});
acessos.Add(new Acesso { valor = 231, data = "04/08/2010"});
acessos.Add(new Acesso { valor = 500, data = "02/08/2010"});
Agora vou adicionar o controle de Gráfico na minha página, e customizar algumas propriedades nele:
1) Title
- ShadowColor: cor da sombra do texto
- Font: estilo do texto
- ShadowOffset: deslocamento da sobra to texto
- Text: texto do titulo
- ForeColor: cor do texto
- Enable: abilita/desabilita as legendas
- SkinStyle: estilo da borda do gráfico
- ChartArea: local para adicionar areas ao gráfico e customizar a exibição dos dados
- Area3DSyle: customização para a area do gráfico ser exibida em 3d
- AxisY: customização para o eixo Y do gráfico
- AxixX: customização para o eixo X do gráfico
<asp:Chart ID="Chart1" runat="server"> <Titles> <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3" Text="Acessos ao Site" ForeColor="26, 59, 105"> </asp:Title> </Titles> <Legends> <asp:Legend Enabled="false" > </asp:Legend> </Legends> <BorderSkin SkinStyle="Emboss"></BorderSkin> <ChartAreas> <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom"> <Area3DStyle Rotation="10" Perspective="10" Enable3D="True" Inclination="15" IsRightAngleAxes="False" WallWidth="0" IsClustered="False" /> <AxisY LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisY> <AxisX LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart>
Com a estrutura do controle montada podemos adicionar Séries de dados (Series) com os valores em cada uma (Points). Lembrando que isso pode ser feito na página, e também, como nesse exemplo adicionado dinamicamente.
Neste exemplo vou adicionar os dados a partir de uma coleção de Acessos.
Series series = new Series();
series.ChartArea = "ChartArea1";
series.Name = "Series1";
series.Color = System.Drawing.ColorTranslator.FromHtml("#4B6C9E");
series.BorderColor = System.Drawing.ColorTranslator.FromHtml("#3A4F63");
foreach (var item in acessos)
{
series.Points.Add(new DataPoint {
YValues = new double[] { item.valor },
ToolTip = item.data,
AxisLabel = item.data });
}
Chart1.Series.Add(series);
Como resultado do exemplo teremos um grafico
Este post teve como finalidade apresentar um pouco do .NET Chart Controls, todos os recursos e possibilidades do Chart Controls pode ser encontrado em:
http://code.msdn.microsoft.com/mschart
Fonte: http://www.rodolfofadino.com.br/2011/08/asp-net-4-0-microsoft-chart-controls/
Caso esteja trabalhando em ambiente WEB tem outra opção: https://developers.google.com/chart/?hl=pt-BR
Se for em ambiente Desktop: http://www.codeproject.com/Articles/5431/A-flexible-charting-library-for-NET
0 comentários: