作成日: 2022/04/18 最終更新日: 2022/04/18
文書種別
使用方法
詳細
FlexChartでは、系列の数に応じて、チャートの左側または右側に、任意の数のY軸(3個以上も可)を設定できます。
しかし軸スクロールバー(AxisScrollbar)は、Y軸(チャートの左側)とY2軸(右側)に1つずつ、計2つまでが設置可能です。
※同じ側(例えば、チャートの右側)に存在する複数の軸にそれぞれ、軸スクロールバーを設定することは想定されていません。
※また、それぞれの軸スクロールバーはY軸ごとに設定する必要があるため、1つの軸スクロールバーで複数のY軸を操作することもできません。
以下に、FlexChartのRenderedイベントで2つの軸スクロールバーを設定する、簡単なコード例を記載します。
デフォルトのY軸に対して設定した軸スクロールバーはチャートの左側に、Y2軸に対して設定した軸スクロールバーはチャートの右側に、それぞれ表示されます。

◎サンプルコード(VB)
しかし軸スクロールバー(AxisScrollbar)は、Y軸(チャートの左側)とY2軸(右側)に1つずつ、計2つまでが設置可能です。
※同じ側(例えば、チャートの右側)に存在する複数の軸にそれぞれ、軸スクロールバーを設定することは想定されていません。
※また、それぞれの軸スクロールバーはY軸ごとに設定する必要があるため、1つの軸スクロールバーで複数のY軸を操作することもできません。
以下に、FlexChartのRenderedイベントで2つの軸スクロールバーを設定する、簡単なコード例を記載します。
デフォルトのY軸に対して設定した軸スクロールバーはチャートの左側に、Y2軸に対して設定した軸スクロールバーはチャートの右側に、それぞれ表示されます。

◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Imports C1.Win.Chart.Interaction
Public Class Form1
Private yAxisScrollbar1 As AxisScrollbar
Private yAxisScrollbar2 As AxisScrollbar
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' データの作成
Dim dt = New DataTable()
dt.Columns.AddRange({New DataColumn("X", GetType(Int32)), New DataColumn("Y1", GetType(Int32)), New DataColumn("Y2", GetType(Int32))})
For i = 0 To 9
dt.Rows.Add(i + 1, 10 - i, (i + 1) * 100)
Next
dt.AcceptChanges()
' Y2軸の作成
Dim axisY2 = New Axis() With {
.Position = Position.Right
}
' チャートの設定
FlexChart1.DataSource = dt
FlexChart1.ChartType = ChartType.LineSymbols
FlexChart1.Series.Clear()
FlexChart1.Series.Add(New Series() With {
.Name = "Series1 (左目盛り)",
.Binding = "Y1",
.BindingX = "X"
})
FlexChart1.Series.Add(New Series() With {
.Name = "Series2 (右目盛り)",
.Binding = "Y2",
.BindingX = "X",
.AxisY = axisY2
})
FlexChart1.Legend.Position = Position.Top
' Y軸目盛りの設定
FlexChart1.AxisY.AxisLine = True '軸線を表示
FlexChart1.AxisY.MajorTickMarks = TickMark.Outside '目盛りマークの位置
End Sub
Private Sub FlexChart1_Rendered(sender As Object, e As RenderEventArgs) Handles FlexChart1.Rendered
' Y軸のAxisScrollbarの設定
If yAxisScrollbar1 Is Nothing Then
yAxisScrollbar1 = New AxisScrollbar(FlexChart1.AxisY) '左側の軸スクロールバー
End If
' Y2軸のAxisScrollbarの設定
If yAxisScrollbar2 Is Nothing Then
yAxisScrollbar2 = New AxisScrollbar(FlexChart1.Series(1).AxisY) '右側の軸スクロールバー
End If
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
using C1.Win.Chart.Interaction;
namespace prj_C1FlexChart
{
public partial class Form1 : Form
{
private AxisScrollbar yAxisScrollbar1;
private AxisScrollbar yAxisScrollbar2;
public Form1()
{
InitializeComponent();
// データの作成
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[]
{
new DataColumn("X", typeof(Int32)),
new DataColumn("Y1", typeof(Int32)),
new DataColumn("Y2", typeof(Int32))
});
for (int i = 0; i <= 9; i++)
dt.Rows.Add(i + 1, 10 - i, (i + 1) * 100);
dt.AcceptChanges();
// Y2軸の作成
var axisY2 = new Axis()
{
Position = Position.Right
};
// チャートの設定
flexChart1.DataSource = dt;
flexChart1.ChartType = ChartType.LineSymbols;
flexChart1.Series.Clear();
flexChart1.Series.Add(new Series()
{
Name = "Series1 (左目盛り)",
Binding = "Y1",
BindingX = "X"
});
flexChart1.Series.Add(new Series()
{
Name = "Series2 (右目盛り)",
Binding = "Y2",
BindingX = "X",
AxisY = axisY2
});
flexChart1.Legend.Position = Position.Top;
// Y軸目盛りの設定
flexChart1.AxisY.AxisLine = true; // 軸線を表示
flexChart1.AxisY.MajorTickMarks = TickMark.Outside; // 目盛りマークの位置
}
private void flexChart1_Rendered(object sender, RenderEventArgs e)
{
// Y軸のAxisScrollbarの設定
if (yAxisScrollbar1 == null)
yAxisScrollbar1 = new AxisScrollbar(flexChart1.AxisY); //左側の軸スクロールバー
// Y2軸のAxisScrollbarの設定
if (yAxisScrollbar2 == null)
yAxisScrollbar2 = new AxisScrollbar(flexChart1.Series[1].AxisY); //右側の軸スクロールバー
}
}
}