Interactividad (Controles Chart)
En función del control Chart que use, puede usar características y técnicas distintas para que el control Chart sea interactivo.
Interactividad en ASP.NET
En el control Chart para ASP.NET, puede usar imágenes interactivas del lado cliente para lograr una experiencia del cliente más satisfactoria en la interactividad de los gráficos. Para habilitar las imágenes interactivas, establezca la propiedad IsMapEnabled en True.
Después, puede llevar a cabo una o varias de las tareas siguientes:
Especificar las propiedades del área de imágenes en un elemento específico del control Chart. Puede hacerlo en la mayoría de los elementos, como Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem y LegendCell.
En cada uno de estos elementos, use las propiedades Tooltip y Url. Corresponden a los atributos alt y href de la etiqueta MAP de HTML. Para especificar atributos adicionales del área de imágenes, use la propiedad MapAreaAttributes. Para especificar varios atributos, sepárelos con espacios. Por ejemplo, puede especificar el siguiente código en esta propiedad para registrar un script de cliente que muestre otro gráfico como información sobre herramientas emergente:
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"Tenga en cuenta que el script anterior requiere que el control Chart de DetailedChart.aspx use la transmisión por secuencias binarias como tipo de presentación. Para obtener más información, vea Presentación de imágenes de un gráfico.
Definir manualmente las áreas de imágenes del control del gráfico mediante la propiedad de colección MapAreas (una colección de objetos MapArea).
Puede definir en cada objeto MapArea la forma, las coordenadas, la dirección URL y la información sobre herramientas del área de imágenes. Corresponden a los siguientes atributos de la etiqueta MAP de HTML, respectivamente: shape, coord, href y alt.
Para especificar atributos de áreas de imágenes adicionales que no tengan ninguna propiedad correspondiente en el objeto MapArea, especifíquelos en la propiedad MapAreaAttributes.
Use la propiedad PostBackValue de MapArea o cualquiera de los elementos del control Chart citados anteriormente para definir un valor de postback en ImageMapEventHandler y, a continuación, recuperarlo a través de la propiedad PostBackValue cuando se desencadene el evento.
Nota
Puede usar las palabras clave aplicables en todos estos atributos. Para obtener más información, vea Palabras clave.
En el siguiente código la imagen de la celda de una leyenda alterna entre seleccionada y borrada cada vez que el usuario hace clic en la celda de leyenda.
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";
}
}
Inactividad en Windows Forms
En el control Chart para Windows Forms, use los eventos del mouse y el método HitTest para habilitar la interactividad de los gráficos. Además, puede usar los cursores, el desplazamiento y el zoom. Para obtener más información, vea Cursores, zoom y desplazamiento.
En el siguiente código de ejemplo, el evento OnMouseMove resalta un punto de datos cuando el cursor pasa sobre él.
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;
}
}
Vea también
Referencia
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting