作成日: 2023/12/01 最終更新日: 2023/12/01
文書種別
使用方法
詳細
FlexChartには、マウスで選択した領域を拡大表示(ズーム)するための機能は備わっていないため、代替策としてMouseDown、MouseMoveおよびMouseUpイベントを利用して、X軸、Y軸のMinおよびMaxを調整する方法が考えられます。
なお、2つのシリーズに対してそれぞれ第1Y軸(デフォルトのY軸)および第2Y軸(Y2軸)を設定した場合は、各Y軸についてMin・Maxの調整を行う必要があります。
簡単なサンプルを下部に記載します。
このコードでは、MouseDownイベントでe.Locationを使用して矩形の左上のポイント(p1)を保存し、MouseDownイベントでマウスの移動先ポイント(p2)を保存し、これらの値をもとにMouseUpイベントでX軸、Y軸およびY2軸のMinおよびMaxを調整しています。
※デザイン画面でRenderedイベントに「flexChart1_Rendered」を追加しておいてください。

サンプルを実行し、Ctrlキーを押下しながらマウスで矩形を選択すると、その領域がズームされます。
なお、F1キーを押下するとズームがリセットされます。
◎サンプルコード(VB)
なお、2つのシリーズに対してそれぞれ第1Y軸(デフォルトのY軸)および第2Y軸(Y2軸)を設定した場合は、各Y軸についてMin・Maxの調整を行う必要があります。
簡単なサンプルを下部に記載します。
このコードでは、MouseDownイベントでe.Locationを使用して矩形の左上のポイント(p1)を保存し、MouseDownイベントでマウスの移動先ポイント(p2)を保存し、これらの値をもとにMouseUpイベントでX軸、Y軸およびY2軸のMinおよびMaxを調整しています。
※デザイン画面でRenderedイベントに「flexChart1_Rendered」を追加しておいてください。
サンプルを実行し、Ctrlキーを押下しながらマウスで矩形を選択すると、その領域がズームされます。
なお、F1キーを押下するとズームがリセットされます。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
Private p1 As Point
Private p2 As Point
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim c1 As Color = Color.Blue
Dim c2 As Color = Color.Orange
' 第1Y軸(デフォルトのY軸)の設定
FlexChart1.AxisY.AxisLine = True
FlexChart1.AxisY.Min = 10
FlexChart1.AxisY.Max = 45
FlexChart1.AxisY.MajorUnit = 5
FlexChart1.AxisY.Style.StrokeColor = c1 ' Y軸の色の設定
FlexChart1.AxisY.MajorGridStyle.StrokeColor = Color.Silver
FlexChart1.AxisY.Title = "第1Y軸"
' 第2Y軸の設定
Dim axisY2 As Axis = New Axis()
axisY2.AxisLine = True
axisY2.Min = 110
axisY2.Max = 180
axisY2.MajorUnit = 10
axisY2.Position = Position.Right
axisY2.Style.StrokeColor = c2 ' Y軸の色の設定
axisY2.Title = "第2Y軸"
Dim series1 As Series = New Series() With {
.Name = "series1",
.ChartType = ChartType.LineSymbols,
.DataSource = New Point() {New Point(0, 10), New Point(1, 25), New Point(2, 15), New Point(3, 45)},
.Binding = "Y",
.BindingX = "X"
}
series1.Style.StrokeColor = c1
series1.SymbolStyle.FillColor = c1
series1.SymbolStyle.StrokeColor = c1
' 折れ線グラフの作成(シリーズ2)
Dim series2 As Series = New Series() With {
.Name = "series2",
.ChartType = ChartType.LineSymbols,
.DataSource = New Point() {New Point(0, 180), New Point(1, 130), New Point(2, 140), New Point(3, 110)},
.Binding = "Y",
.BindingX = "X",
.AxisY = axisY2
}
series2.Style.StrokeColor = c2
series2.SymbolStyle.FillColor = c2
series2.SymbolStyle.StrokeColor = c2
' チャートの設定
FlexChart1.Series.Clear()
FlexChart1.Series.Add(series1)
FlexChart1.Series.Add(series2)
FlexChart1.Legend.Position = Position.Top
End Sub
Private Sub FlexChart1_KeyDown(sender As Object, e As KeyEventArgs) Handles FlexChart1.KeyDown
If e.KeyCode = Keys.F1 Then
' ズームのリセット
FlexChart1.BeginUpdate()
FlexChart1.AxisX.Min = Double.NaN
FlexChart1.AxisX.Max = Double.NaN
FlexChart1.AxisY.Min = 10
FlexChart1.AxisY.Max = 45
FlexChart1.Series(1).AxisY.Min = 110
FlexChart1.Series(1).AxisY.Max = 180
FlexChart1.EndUpdate()
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()
FlexChart1.Update()
End If
End Sub
Private Sub FlexChart1_MouseUp(sender As Object, e As MouseEventArgs) Handles FlexChart1.MouseUp
If Control.ModifierKeys = Keys.Control Then
' 軸範囲の変更
Dim p1 = {FlexChart1.AxisX.ConvertBack(Me.p1.X), FlexChart1.AxisY.ConvertBack(Me.p1.Y)}
Dim p2 = {FlexChart1.AxisX.ConvertBack(Me.p2.X), FlexChart1.AxisY.ConvertBack(Me.p2.Y)}
Dim p1Y2 = FlexChart1.Series(1).AxisY.ConvertBack(Me.p1.Y)
Dim p2Y2 = FlexChart1.Series(1).AxisY.ConvertBack(Me.p2.Y)
FlexChart1.BeginUpdate()
FlexChart1.AxisX.Min = Math.Min(p1(0), p2(0))
FlexChart1.AxisY.Min = Math.Min(p1(1), p2(1))
FlexChart1.Series(1).AxisY.Min = Math.Min(p1Y2, p2Y2)
FlexChart1.AxisX.Max = Math.Max(p1(0), p2(0))
FlexChart1.AxisY.Max = Math.Max(p1(1), p2(1))
FlexChart1.Series(1).AxisY.Max = Math.Max(p1Y2, p1Y2)
FlexChart1.EndUpdate()
' 編集の初期化
Me.p1 = Point.Empty
Me.p2 = Point.Empty
End If
End Sub
Private Sub flexChart1_Rendered(ByVal sender As Object, ByVal e As RenderEventArgs) Handles FlexChart1.Rendered
' 矩形の描画
Dim rect = 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)
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
namespace prj_C1FlexChart
{
public partial class Form1 : Form
{
private Point p1;
private Point p2;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
Color c1 = Color.Blue;
Color c2 = Color.Orange;
// 第1Y軸(デフォルトのY軸)の設定
flexChart1.AxisY.AxisLine = true;
flexChart1.AxisY.Min = 10;
flexChart1.AxisY.Max = 45;
flexChart1.AxisY.MajorUnit = 5;
flexChart1.AxisY.Style.StrokeColor = c1; // Y軸の色の設定
flexChart1.AxisY.MajorGridStyle.StrokeColor = Color.Silver;
flexChart1.AxisY.Title = "第1Y軸";
// 第2Y軸の設定
Axis axisY2 = new Axis();
axisY2.AxisLine = true;
axisY2.Min = 110;
axisY2.Max = 180;
axisY2.MajorUnit = 10;
axisY2.Position = Position.Right;
axisY2.Style.StrokeColor = c2; // Y軸の色の設定
axisY2.Title = "第2Y軸";
// 折れ線グラフの作成(シリーズ1)
Series series1 = new Series()
{
Name = "series1",
ChartType = ChartType.LineSymbols,
DataSource = new Point[] { new Point(0, 10), new Point(1, 25), new Point(2, 15), new Point(3, 45)},
Binding = "Y",
BindingX = "X",
};
series1.Style.StrokeColor = c1;
series1.SymbolStyle.FillColor = c1;
series1.SymbolStyle.StrokeColor = c1;
// 折れ線グラフの作成(シリーズ2)
Series series2 = new Series()
{
Name = "series2",
ChartType = ChartType.LineSymbols,
DataSource = new Point[] { new Point(0, 180), new Point(1, 130), new Point(2, 140), new Point(3, 110)},
Binding = "Y",
BindingX = "X",
AxisY = axisY2
};
series2.Style.StrokeColor = c2;
series2.SymbolStyle.FillColor = c2;
series2.SymbolStyle.StrokeColor = c2;
// チャートの設定
flexChart1.Series.Clear();
flexChart1.Series.Add(series1);
flexChart1.Series.Add(series2);
flexChart1.Legend.Position = Position.Top;
}
private void flexChart1_KeyDown(object sender, KeyEventArgs e)
{
if (e.KeyCode == Keys.F1)
{
// ズームのリセット
flexChart1.BeginUpdate();
flexChart1.AxisX.Min = Double.NaN;
flexChart1.AxisX.Max = Double.NaN;
flexChart1.AxisY.Min = 10;
flexChart1.AxisY.Max = 45;
flexChart1.Series[1].AxisY.Min = 110;
flexChart1.Series[1].AxisY.Max = 180;
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();
flexChart1.Update();
}
}
private void flexChart1_MouseUp(object sender, MouseEventArgs e)
{
if (Control.ModifierKeys == Keys.Control)
{
// 軸範囲の変更
var p1 = new[] { flexChart1.AxisX.ConvertBack(this.p1.X), flexChart1.AxisY.ConvertBack(this.p1.Y) };
var p2 = new[] { flexChart1.AxisX.ConvertBack(this.p2.X), flexChart1.AxisY.ConvertBack(this.p2.Y) };
var p1Y2 = flexChart1.Series[1].AxisY.ConvertBack(this.p1.Y);
var p2Y2 = flexChart1.Series[1].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.Series[1].AxisY.Min = Math.Min(p1Y2, p2Y2);
flexChart1.AxisX.Max = Math.Max(p1[0], p2[0]);
flexChart1.AxisY.Max = Math.Max(p1[1], p2[1]);
flexChart1.Series[1].AxisY.Max = Math.Max(p1Y2, p1Y2);
flexChart1.EndUpdate();
// 編集の初期化
this.p1 = Point.Empty;
this.p2 = Point.Empty;
}
}
private void flexChart1_Rendered(object sender, RenderEventArgs e)
{
// 矩形の描画
var rect = 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);
}
}
}