対話機能 (グラフ コントロール)
使用しているグラフ コントロールに応じてさまざまな機能や技術を使用し、グラフ コントロールを対話的にすることができます。
ASP.NET の対話機能
ASP.NET 用のグラフ コントロールの場合、クライアント側のイメージ マップを使用して、グラフの対話機能で操作性を向上することができます。イメージ マップを有効にするには、IsMapEnabled プロパティを True に設定します。
次に、以下から 1 つまたは複数を実行できます。
グラフ コントロールの特定の要素にマップ領域のプロパティを指定します。ほとんどの要素にこのプロパティを指定できます。たとえば、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 プロパティを介してそのポストバック値を取得します。
.gif "注意")
注これらすべての属性で適用可能なキーワードを使用できます。詳細については、「キーワード」を参照してください。
次のコードでは、凡例のセルをクリックするたびに、選択状態と選択解除状態で凡例のセルのイメージを切り替えます。
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 フォームの対話機能
Windows フォームのグラフ コントロールでグラフの対話機能を有効にするには、マウス イベントと 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