作成日: 2023/08/02 最終更新日: 2023/08/02
文書種別
使用方法
詳細
FlexChartには、マウスで選択した領域を拡大表示(ズーム)するための機能は備わっていません。代替策として、MouseDownおよびMouseUpイベントで、選択した領域の開始点/終了点を取得し、この値をもとに、AxisXのMin/Max、およびAxisYのMin/Maxを調整して拡大表示させることができます。
ただしこのままでは、FlexChart上に描画した図形注釈は、レイヤーが異なるためリサイズされません。
対応方法として、Renderedイベント内で図形注釈のサイズを設定することにより、マウスでのズームに連動させる手段が考えられます。
以下に、選択した領域を、四角形の注釈も含めてズームするコードを記載します。
※サンプルを実行し、注釈を含む領域を Ctrlキー + マウスドラッグで選択してください。

◎サンプルコード(VB)
ただしこのままでは、FlexChart上に描画した図形注釈は、レイヤーが異なるためリサイズされません。
対応方法として、Renderedイベント内で図形注釈のサイズを設定することにより、マウスでのズームに連動させる手段が考えられます。
以下に、選択した領域を、四角形の注釈も含めてズームするコードを記載します。
※サンプルを実行し、注釈を含む領域を Ctrlキー + マウスドラッグで選択してください。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
Private AnnotationLayer01 As Annotation.AnnotationLayer
Private p1 As Point
Private p2 As Point
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
'データの作成
Dim dt As New DataTable()
With dt
.Columns.Add("X", GetType(Int32))
.Columns.Add("Y", GetType(Int32))
'Dim r As New Random()
For i = 0 To 5
'.Rows.Add(i, r.Next(1, 20))
.Rows.Add(i, i * 4)
Next
.AcceptChanges()
End With
' シリーズの作成
Dim series1 As New Series() With {
.BindingX = "X",
.Binding = "Y",
.DataSource = dt
}
' チャートの設定
With FlexChart1
.Series.Clear()
.Series.Add(series1)
.ChartType = ChartType.LineSymbols
.AxisY.Max = 20
.AxisY.Min = 0
.PlotMargin = New Padding(40, 40, 40, 40)
.ToolTip.Active = False
End With
' 注釈レイヤの作成
AnnotationLayer01 = New Annotation.AnnotationLayer(FlexChart1)
' 四角形の注釈
Dim annRect As New Annotation.Rectangle("")
With annRect
.Style.FillColor = Color.FromArgb(100, Color.Aqua)
.Style.StrokeColor = Color.Black
.Style.StrokeWidth = 1
.Style.LinePattern = LinePatternEnum.Solid
End With
AnnotationLayer01.Annotations.Add(annRect)
End Sub
Private Sub FlexChart1_Rendered(sender As Object, e As C1.Win.Chart.RenderEventArgs) Handles FlexChart1.Rendered
' ズーム処理:矩形の描画
Dim rect As New Rectangle(Math.Min(p1.X, p2.X), Math.Min(p1.Y, p2.Y), Math.Abs(p1.X - p2.X), Math.Abs(p1.Y - p2.Y))
e.Graphics.DrawRectangle(Pens.Red, rect)
' 注釈の描画
Dim annRect = DirectCast(AnnotationLayer01.Annotations(0), Annotation.Rectangle)
With annRect
.Attachment = Annotation.AnnotationAttachment.DataCoordinate
.Location = New PointF(2 / 2.0F, (FlexChart1.AxisY.ActualMax + FlexChart1.AxisY.ActualMin) / 2.0F)
.Height = FlexChart1.AxisY.Convert(0) - FlexChart1.AxisY.Convert(20)
.Width = FlexChart1.AxisX.Convert(2) - FlexChart1.AxisX.Convert(0)
End With
End Sub
' ズーム処理
Private Sub FlexChart1_KeyDown(sender As Object, e As KeyEventArgs) Handles FlexChart1.KeyDown
If e.KeyCode = Keys.F1 Then
e.SuppressKeyPress = True
' F1キーでズームのリセット
With FlexChart1
.BeginUpdate()
.AxisX.Min = Double.NaN
.AxisY.Min = 0
.AxisX.Max = Double.NaN
.AxisY.Max = 20
.EndUpdate()
End With
End If
End Sub
' ズーム処理
Private Sub FlexChart1_MouseDown(sender As Object, e As MouseEventArgs) Handles FlexChart1.MouseDown
If Control.ModifierKeys = Keys.Control Then
' 開始位置の保存
p1 = e.Location
p2 = Point.Empty
End If
End Sub
' ズーム処理
Private Sub FlexChart1_MouseMove(sender As Object, e As MouseEventArgs) Handles FlexChart1.MouseMove
If e.Button = MouseButtons.Left AndAlso Control.ModifierKeys = Keys.Control Then
' 現在位置の保存
p2 = e.Location
' 現在の矩形の描画
FlexChart1.Invalidate()
End If
End Sub
' ズーム処理
Private Sub FlexChart1_MouseUp(sender As Object, e As MouseEventArgs) Handles FlexChart1.MouseUp
If Control.ModifierKeys = Keys.Control Then
With FlexChart1
' 軸範囲の変更
Dim p1 As Double() = New Double() { .AxisX.ConvertBack(Me.p1.X), .AxisY.ConvertBack(Me.p1.Y)}
Dim p2 As Double() = New Double() { .AxisX.ConvertBack(Me.p2.X), .AxisY.ConvertBack(Me.p2.Y)}
.BeginUpdate()
.AxisX.Min = Math.Min(p1(0), p2(0))
.AxisY.Min = Math.Min(p1(1), p2(1))
.AxisX.Max = Math.Max(p1(0), p2(0))
.AxisY.Max = Math.Max(p1(1), p2(1))
.EndUpdate()
' 変数の初期化
Me.p1 = Point.Empty
Me.p2 = Point.Empty
End With
End If
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
using C1.Win.Chart.Annotation;
namespace prj_Anno_enLarge
{
public partial class Form1 : Form
{
C1.Win.Chart.Annotation.AnnotationLayer AnnotationLayer01;
Point p1;
Point p2;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//データの作成
DataTable dt = new DataTable();
dt.Columns.Add("X", typeof(Int32));
dt.Columns.Add("Y", typeof(Int32));
for (int i = 0; i < 6; i++)
{
dt.Rows.Add(i, i * 4);
}
dt.AcceptChanges();
// シリーズの作成
Series series1 = new Series()
{
BindingX = "X",
Binding = "Y",
DataSource = dt
};
// チャートの設定
flexChart1.Series.Clear();
flexChart1.Series.Add(series1);
flexChart1.ChartType = ChartType.LineSymbols;
flexChart1.AxisY.Max = 20;
flexChart1.AxisY.Min = 0;
flexChart1.PlotMargin = new Padding(40, 40, 40, 40);
flexChart1.ToolTip.Active = false;
// 注釈レイヤの作成
AnnotationLayer01 = new AnnotationLayer(flexChart1);
// 四角形の注釈
C1.Win.Chart.Annotation.Rectangle annRect = new C1.Win.Chart.Annotation.Rectangle("");
annRect.Style.FillColor = Color.FromArgb(100, Color.Aqua);
annRect.Style.StrokeColor = Color.Black;
annRect.Style.StrokeWidth = 1;
annRect.Style.LinePattern = LinePatternEnum.Solid;
AnnotationLayer01.Annotations.Add(annRect);
}
private void flexChart1_Rendered(object sender, RenderEventArgs e)
{
// ズーム処理:矩形の描画
System.Drawing.Rectangle rect = new System.Drawing.Rectangle(Math.Min(p1.X, p2.X), Math.Min(p1.Y, p2.Y), Math.Abs(p1.X - p2.X), Math.Abs(p1.Y - p2.Y));
e.Graphics.DrawRectangle(Pens.Red, rect);
//注釈の描画
C1.Win.Chart.Annotation.Rectangle annRect = (C1.Win.Chart.Annotation.Rectangle)AnnotationLayer01.Annotations[0];
annRect.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
annRect.Location = new PointF(2 / 2.0F, (float)(flexChart1.AxisY.ActualMax + flexChart1.AxisY.ActualMin) / 2.0F);
annRect.Height = flexChart1.AxisY.Convert(0) - flexChart1.AxisY.Convert(20);
annRect.Width = flexChart1.AxisX.Convert(2) - flexChart1.AxisX.Convert(0);
}
private void flexChart1_KeyDown(object sender, KeyEventArgs e)
{
if ((e.KeyCode == Keys.F1))
{
e.SuppressKeyPress = true;
// F1キーでズームのリセット
flexChart1.BeginUpdate();
flexChart1.AxisX.Min = Double.NaN;
flexChart1.AxisY.Min = 0;
flexChart1.AxisX.Max = Double.NaN;
flexChart1.AxisY.Max = 20;
flexChart1.EndUpdate();
}
}
// ズーム処理
private void flexChart1_MouseDown(object sender, MouseEventArgs e)
{
if ((Control.ModifierKeys == Keys.Control))
{
// 開始位置の保存
p1 = e.Location;
p2 = Point.Empty;
}
}
// ズーム処理
private void flexChart1_MouseMove(object sender, MouseEventArgs e)
{
if (((e.Button == MouseButtons.Left) && (Control.ModifierKeys == Keys.Control)))
{
// 現在位置の保存
p2 = e.Location;
// 現在の矩形の描画
flexChart1.Invalidate();
}
}
// ズーム処理
private void flexChart1_MouseUp(object sender, MouseEventArgs e)
{
if ((Control.ModifierKeys == Keys.Control))
{
// 軸範囲の変更
double[] p1 = new double[] {flexChart1.AxisX.ConvertBack(this.p1.X), flexChart1.AxisY.ConvertBack(this.p1.Y)};
double[] p2 = new double[] {flexChart1.AxisX.ConvertBack(this.p2.X), flexChart1.AxisY.ConvertBack(this.p2.Y)};
flexChart1.BeginUpdate();
flexChart1.AxisX.Min = Math.Min(p1[0], p2[0]);
flexChart1.AxisY.Min = Math.Min(p1[1], p2[1]);
flexChart1.AxisX.Max = Math.Max(p1[0], p2[0]);
flexChart1.AxisY.Max = Math.Max(p1[1], p2[1]);
flexChart1.EndUpdate();
// 変数の初期化
this.p1 = Point.Empty;
this.p2 = Point.Empty;
}
}
}
}