作成日: 2022/02/09 最終更新日: 2022/02/09
文書種別
使用方法
詳細
シリーズのChartTypeを「LineSymbols」に設定して折れ線グラフ(マーカー付)を表示したとき、マウスクリックでシリーズ全体が選択されるようにするには、FlexChartのSelectionModeを「Series」に設定します。
このとき、FlexChartのRenderingイベントを使用すると、選択したシリーズの外観をカスタマイズすることができます。
線の色、線幅、線の種類(実線/点線/破線など)はそれぞれ、SelectionStyleのStrokeColorとStrokeWidth、SelectedSeries.StyleのLinePatternで指定します。
また、マーカー(シンボル)の色、形、大きさはそれぞれ、SelectionStyleのFillColor、SelectedSeriesのSymbolMarkerとSymbolSizeで設定できます。
以下に、各シリーズを選択したときに、それぞれの外観を変更する例を記載します。

◎サンプルコード(VB)
このとき、FlexChartのRenderingイベントを使用すると、選択したシリーズの外観をカスタマイズすることができます。
線の色、線幅、線の種類(実線/点線/破線など)はそれぞれ、SelectionStyleのStrokeColorとStrokeWidth、SelectedSeries.StyleのLinePatternで指定します。
また、マーカー(シンボル)の色、形、大きさはそれぞれ、SelectionStyleのFillColor、SelectedSeriesのSymbolMarkerとSymbolSizeで設定できます。
以下に、各シリーズを選択したときに、それぞれの外観を変更する例を記載します。

◎サンプルコード(VB)
Imports C1.Win.Chart
Imports C1.Chart
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
FlexChart1.Series.Clear()
' 折れ線グラフ用シリーズの作成
Dim series1 As Series = New Series()
With series1
.ChartType = C1.Chart.ChartType.LineSymbols
.Name = "Series1"
.DataSource = New PointF() {New PointF(1.0F, 1.0F), New PointF(2.0F, 2.0F), New PointF(3.0F, 2.0F), New PointF(4.0F, 3.0F), New PointF(5.0F, 4.0F)}
.Binding = "Y"
.BindingX = "X"
End With
series1.Style.LinePattern = C1.Chart.LinePatternEnum.Dot '線種
series1.SymbolSize = 10 'マーカーの大きさ
series1.SymbolMarker = C1.Chart.SymbolMarker.Circle 'マーカーの形
FlexChart1.Series.Add(series1)
Dim series2 As Series = New Series()
With series2
.ChartType = C1.Chart.ChartType.LineSymbols
.Name = "Series2"
.DataSource = New PointF() {New PointF(1.0F, 5.0F), New PointF(2.0F, 3.0F), New PointF(3.0F, 4.0F), New PointF(4.0F, 1.0F), New PointF(5.0F, 2.0F)}
.Binding = "Y"
.BindingX = "X"
End With
series2.Style.LinePattern = C1.Chart.LinePatternEnum.Dot '線種
series2.SymbolSize = 10 'マーカーの大きさ
series2.SymbolMarker = C1.Chart.SymbolMarker.Circle 'マーカーの形
FlexChart1.Series.Add(series2)
' 選択モードの設定
FlexChart1.SelectionMode = ChartSelectionMode.Series ' シリーズ全体を選択
End Sub
Private Sub FlexChart1_Rendering(sender As Object, e As RenderEventArgs) Handles FlexChart1.Rendering
If (Not (FlexChart1.SelectedSeries) Is Nothing) Then
If (FlexChart1.SelectedSeries.Name = "Series1") Then
' Series(1)を初期値に戻す
FlexChart1.Series(1).Style.LinePattern = C1.Chart.LinePatternEnum.Dot
FlexChart1.Series(1).SymbolSize = 10
FlexChart1.Series(1).SymbolMarker = SymbolMarker.Circle
' Series(0)の選択色やマーカー等の変更
FlexChart1.SelectedSeries.Style.LinePattern = C1.Chart.LinePatternEnum.Solid
FlexChart1.SelectedSeries.SymbolSize = 15
FlexChart1.SelectedSeries.SymbolMarker = SymbolMarker.Box
FlexChart1.SelectionStyle.StrokeColor = Color.DarkBlue '線の色
FlexChart1.SelectionStyle.FillColor = Color.Pink 'マーカーの色
FlexChart1.SelectionStyle.StrokeWidth = 5.0F '線幅(太さ)
Else
' Series(0)を初期値に戻す
FlexChart1.Series(0).Style.LinePattern = C1.Chart.LinePatternEnum.Dot
FlexChart1.Series(0).SymbolSize = 10
FlexChart1.Series(0).SymbolMarker = SymbolMarker.Circle
' Series(1)の選択色やマーカー等の変更
FlexChart1.SelectedSeries.Style.LinePattern = C1.Chart.LinePatternEnum.Solid
FlexChart1.SelectedSeries.SymbolSize = 15
FlexChart1.SelectedSeries.SymbolMarker = SymbolMarker.Box
FlexChart1.SelectionStyle.StrokeColor = Color.DarkRed '線の色
FlexChart1.SelectionStyle.FillColor = Color.Yellow 'マーカーの色
FlexChart1.SelectionStyle.StrokeWidth = 5.0F '線幅(太さ)
End If
End If
End Sub
End Class
◎サンプルコード(C#)
using C1.Win.Chart;
using C1.Chart;
namespace prj_FlexChart
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
flexChart1.Series.Clear();
// 折れ線グラフ用シリーズの作成
Series series1 = new Series()
{
ChartType = C1.Chart.ChartType.LineSymbols,
Name = "Series1",
DataSource = new PointF[] { new PointF(1f, 1f), new PointF(2f, 2f), new PointF(3f, 2f), new PointF(4f, 3f), new PointF(5f, 4f) },
Binding = "Y",
BindingX = "X"
};
series1.Style.LinePattern = C1.Chart.LinePatternEnum.Dot; //線種
series1.SymbolSize = 10; //マーカーの大きさ
series1.SymbolMarker = SymbolMarker.Circle; //マーカーの形
flexChart1.Series.Add(series1);
Series series2 = new Series()
{
ChartType = C1.Chart.ChartType.LineSymbols,
Name = "Series2",
DataSource = new PointF[] { new PointF(1f, 5f), new PointF(2f, 3f), new PointF(3f, 4f), new PointF(4f, 1f), new PointF(5f, 2f) },
Binding = "Y",
BindingX = "X"
};
series2.Style.LinePattern = C1.Chart.LinePatternEnum.Dot; //線種
series2.SymbolSize = 10; //マーカーの大きさ
series2.SymbolMarker = SymbolMarker.Circle; //マーカーの形
flexChart1.Series.Add(series2);
// 選択モードの設定
flexChart1.SelectionMode = ChartSelectionMode.Series; //シリーズ全体を選択
}
private void flexChart1_Rendering(object sender, RenderEventArgs e)
{
if (flexChart1.SelectedSeries != null)
{
if (flexChart1.SelectedSeries.Name == "Series1")
{
// Series[1]を初期値に戻す
flexChart1.Series[1].Style.LinePattern = C1.Chart.LinePatternEnum.Dot;
flexChart1.Series[1].SymbolSize = 10;
flexChart1.Series[1].SymbolMarker = SymbolMarker.Circle;
// Series[0]の選択色やマーカー等の変更
flexChart1.SelectedSeries.Style.LinePattern = C1.Chart.LinePatternEnum.Solid;
flexChart1.SelectedSeries.SymbolSize = 15;
flexChart1.SelectedSeries.SymbolMarker = SymbolMarker.Box;
flexChart1.SelectionStyle.StrokeColor = Color.DarkBlue; //線の色
flexChart1.SelectionStyle.FillColor = Color.Pink; //マーカーの色
flexChart1.SelectionStyle.StrokeWidth = 5f; //線幅(太さ)
}
else
{
// Series[0]を初期値に戻す
flexChart1.Series[0].Style.LinePattern = C1.Chart.LinePatternEnum.Dot;
flexChart1.Series[0].SymbolSize = 10;
flexChart1.Series[0].SymbolMarker = SymbolMarker.Circle;
// Series[1]の選択色やマーカー等の変更
flexChart1.SelectedSeries.Style.LinePattern = C1.Chart.LinePatternEnum.Solid;
flexChart1.SelectedSeries.SymbolSize = 15;
flexChart1.SelectedSeries.SymbolMarker = SymbolMarker.Box;
flexChart1.SelectionStyle.StrokeColor = Color.DarkRed; //線の色
flexChart1.SelectionStyle.FillColor = Color.Yellow; //マーカーの色
flexChart1.SelectionStyle.StrokeWidth = 5f; //線幅(太さ)
}
}
}
}
}