대화형 작업(차트 컨트롤)

아티클
03/02/2011

사용 중인 차트 컨트롤에 따라 다른 기능과 기술을 사용하여 차트 컨트롤이 상호 작용하도록 할 수 있습니다.

ASP.NET의 대화형 작업

ASP.NET용 차트 컨트롤에서 클라이언트측 이미지 맵을 사용하여 차트에 대한 다양한 대화형 작업을 제공할 수 있습니다. 이미지 맵을 사용하려면 IsMapEnabled 속성을 True로 설정합니다.

그런 후 다음 중 하나를 수행할 수 있습니다.

차트 컨트롤의 특정 요소에서 맵 영역 속성을 지정합니다. Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem, LegendCell 등과 같은 대부분의 요소에서 이 작업을 수행할 수 있습니다.

각 요소에서 Tooltip 및 Url 속성을 사용합니다. 이러한 속성은 HTML MAP 태그의 alt 및 href 특성에 해당합니다. 추가 맵 영역 특성을 지정하려면 MapAreaAttributes 속성을 사용합니다. 여러 특성을 지정하려면 특성을 공백으로 구분합니다. 예를 들어 이 속성에서 다음 코드를 지정하여 다른 차트를 팝업 도구 설명으로 표시하는 클라이언트측 스크립트를 등록할 수 있습니다.
```
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"
```
위의 스크립트를 사용하려면 DetailedChart.aspx의 차트 컨트롤에서 이진 스트리밍을 렌더링 형식으로 사용해야 합니다. 자세한 내용은 차트 이미지 렌더링을 참조하십시오.
MapAreas 컬렉션 속성(MapArea 개체 컬렉션)을 사용하여 차트 컨트롤에서 맵 영역을 수동으로 정의합니다.

각 MapArea 개체에서 맵 영역의 셰이프, 좌표, URL 및 도구 설명을 정의할 수 있습니다. 각 항목은 HTML MAP 태그의 shape, coord, href 및 alt 특성에 해당합니다.

MapArea 개체에 해당 속성이 없는 추가 맵 영역 특성을 지정하려면 MapAreaAttributes 속성에서 지정합니다.
위에서 설명한 차트 컨트롤 요소나 MapArea에서 PostBackValue 속성을 사용하여 포스트백 값을 ImageMapEventHandler로 정의한 다음 이벤트가 트리거되면 PostBackValue 속성을 통해 해당 포스트백 값을 검색합니다.

참고

이러한 모든 특성에서 해당 키워드를 사용할 수 있습니다. 자세한 내용은 키워드를 참조하십시오.

다음 코드에서는 사용자가 범례 셀을 클릭할 때마다 범례 셀의 이미지를 선택하거나 선택을 취소하도록 전환합니다.

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";
   }
}

Windows Forms 대화형 작업

Windows Forms용 차트 컨트롤에서 마우스 이벤트와 HitTest 메서드를 사용하여 차트 대화형 작업을 설정할 수 있습니다. 커서, 스크롤 및 확대/축소를 사용할 수도 있습니다. 자세한 내용은 커서, 확대/축소 및 스크롤을 참조하십시오.

다음 예제 코드에서는 OnMouseMove 이벤트를 사용하여 커서를 데이터 요소 위에 놓을 때 해당 데이터 요소를 강조 표시합니다.

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;
   }
}

참고 항목

참조

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

다음을 통해 공유

대화형 작업(차트 컨트롤)

ASP.NET의 대화형 작업

Windows Forms 대화형 작업

참고 항목

참조

관련 자료

추가 리소스