Interatividade
Dependendo do controle de gráfico que você está usando, você pode usar diferentes recursos e técnicas para fazer o controle de gráfico interativo.
Interatividade no ASP.NET
No controle do gráfico para o ASP.NET, você pode usar mapas de imagem do lado do cliente para uma experiência de usuário mais rica na interatividade de seus gráficos. Para habilitar os mapas de imagem, defina a IsMapEnabled propriedade True.
Em seguida, você pode fazer uma ou mais das seguintes opções:
Especifique as propriedades da área do mapa em um elemento específico do controle do gráfico. Você pode fazer isso na maioria dos elementos, tais como Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem, e LegendCell.
Em cada um desses elementos, use o Tooltip e Url propriedades. Eles correspondem do alt e href atributos na marca HTML mapa. Para especificar atributos de área de mapa adicionais, use o MapAreaAttributes propriedade. Para especificar vários atributos, separe-as com espaços. Por exemplo, você pode especificar o código a seguir nesta propriedade para registrar um script do lado do cliente que exibe outro gráfico como uma dica de ferramenta pop-up:
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"Observe que o script anterior requer que o controle gráfico DetailedChart.aspx usa o fluxo binário como o tipo de processamento. Para obter mais informações, consulte renderização de imagem de gráfico.
Definir manualmente as áreas do mapa em seu controle de gráfico usando o MapAreas propriedade de coleção (uma coleção de MapArea objetos).
Você pode definir em cada MapArea a forma, as coordenadas, URL e dica de ferramenta da área do mapa do objeto. Eles correspondem aos seguintes respectivos atributos na marca HTML mapa: shape, coord, href, e alt.
Para especificar atributos de área de mapa adicionais que não possuem uma propriedade correspondente de MapArea de objeto, especifique-o no MapAreaAttributes propriedade.
Use o PostBackValue propriedade MapArea ou qualquer gráfico controlar elementos mencionados acima para definir um valor de retorno post para ImageMapEventHandlere, em seguida, recuperar o valor de retorno de postagem via o PostBackValue propriedade quando o evento é disparado.
Dica
Você pode usar palavras-chave aplicáveis em todos esses atributos.Para obter mais informações, consulte palavras-chave.
O código a seguir alterna a imagem da célula de uma legenda entre marcadas e desmarcadas toda vez que o usuário clica na célula de legenda.
Imports System.Web.UI.DataVisualization.Charting
...
' Set the legend cell to an image showing selection cleared
Chart1.Legends(0).CustomItems(0).Cells(0).Image = "./cleared.png"
Chart1.Legends(0).CustomItems(0).Cells(0).PostBackValue = "item 1"
' Add an ImageMapEventHandler to the Chart.Click event
Me.Chart1.Click += New ImageMapEventHandler(Me.Chart1_Click)
...
' Change the selection image when the user clicks on the legend cell
Private Sub Chart1_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
If e.PostBackValue = "item 1" Then
Dim cell As LegendCell = Chart1.Legends(0).CustomItems(0).Cells(0)
cell.Image = (cell.Image = "./cleared.png") ? "./selected.png" : "./cleared.png"
End If
End Sub
using System.Web.UI.DataVisualization.Charting;
...
// Set the legend cell to an image showing selection cleared
Chart1.Legends[0].CustomItems[0].Cells[0].Image = "./cleared.png";
Chart1.Legends[0].CustomItems[0].Cells[0].PostBackValue = "item 1";
// Add an ImageMapEventHandler to the Chart.Click event
this.Chart1.Click += new ImageMapEventHandler(this.Chart1_Click);
...
// Change the selection image when the user clicks on the legend cell
private void Chart1_Click(object sender, System.Web.UI.WebControls.ImageMapEventArgs e)
{
if (e.PostBackValue == "item 1")
{
LegendCell cell = Chart1.Legends[0].CustomItems[0].Cells[0];
cell.Image = (cell.Image == "./cleared.png") ? "./selected.png" : "./cleared.png";
}
}
Interatividade no Windows Forms
No controle do gráfico para o Windows Forms, você pode usar eventos de mouse e o HitTest método para ativar a interatividade do gráfico. Você também pode usar cursores, rolagem e zoom. Para obter mais informações, consulte cursores, zoom e rolagem.
O exemplo de código a seguir usa o OnMouseMove evento para realçar um ponto de dados quando o cursor se move sobre ele.
Me.Chart1.MouseMove += New System.Windows.Forms.MouseEventHandler(Me.Chart1_MouseMove)
...
Private Sub Chart1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
' Call HitTest
Dim result As HitTestResult = Chart1.HitTest(e.X,e.Y)
' Reset Data Point Attributes
Dim point As DataPoint
For Each point In Chart1.Series(0).Points
poInteger.BackSecondaryColor = Color.Black
poInteger.BackHatchStyle = ChartHatchStyle.None
poInteger.BorderWidth = 1
Next
' If the mouse if over a data point
If result.ChartElementType = ChartElementType.DataPoint Then
' Find selected data point
Dim point As DataPoint = Chart1.Series(0).Points(result.PointIndex)
' Change the appearance of the data point
poInteger.BackSecondaryColor = Color.White
poInteger.BackHatchStyle = ChartHatchStyle.Percent25
poInteger.BorderWidth = 2
Else
' Set default cursor
Me.Cursor = Cursors.Default
End If
End Sub
this.Chart1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.Chart1_MouseMove);
...
private void Chart1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
{
// Call HitTest
HitTestResult result = Chart1.HitTest( e.X, e.Y );
// Reset Data Point Attributes
foreach( DataPoint point in Chart1.Series[0].Points )
{
point.BackSecondaryColor = Color.Black;
point.BackHatchStyle = ChartHatchStyle.None;
point.BorderWidth = 1;
}
// If the mouse if over a data point
if(result.ChartElementType == ChartElementType.DataPoint)
{
// Find selected data point
DataPoint point = Chart1.Series[0].Points[result.PointIndex];
// Change the appearance of the data point
point.BackSecondaryColor = Color.White;
point.BackHatchStyle = ChartHatchStyle.Percent25;
point.BorderWidth = 2;
}
else
{
// Set default cursor
this.Cursor = Cursors.Default;
}
}
Consulte também
Referência
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting