作成日: 2025/03/10 最終更新日: 2025/03/10
文書種別
使用方法
詳細
積層棒グラフと折れ線グラフを 1 つのプロット領域内に表示する事により、複合グラフを表示できます。
それには、まず積層棒グラフ用の複数の系列を追加し、それぞれに異なるデータ値を設定し、ChartType(=Column)とStackingGroupプロパティ値は同じにしておきます。このとき、FlexChartのStackingを「Stacked」にすることで積層グラフとして表示できます。
次いで、折れ線グラフにする系列を一つ追加し、ChartTypeを「LineSymbols」に設定します。
この場合、異なる種類のデータに対応するために複数のY軸を用意し、各グラフで指定できます。
以下に、4つの系列を積層棒グラフとして表示し、折れ線グラフとの複合グラフとする例を記載します。 ここでは、積層棒グラフはY1軸(左)、折れ線グラフはY2軸を使用しています。
※Y1軸は既定のY軸なので、系列に明示的に設定する必要はありません。

◎サンプルコード(VB)
それには、まず積層棒グラフ用の複数の系列を追加し、それぞれに異なるデータ値を設定し、ChartType(=Column)とStackingGroupプロパティ値は同じにしておきます。このとき、FlexChartのStackingを「Stacked」にすることで積層グラフとして表示できます。
次いで、折れ線グラフにする系列を一つ追加し、ChartTypeを「LineSymbols」に設定します。
この場合、異なる種類のデータに対応するために複数のY軸を用意し、各グラフで指定できます。
以下に、4つの系列を積層棒グラフとして表示し、折れ線グラフとの複合グラフとする例を記載します。 ここでは、積層棒グラフはY1軸(左)、折れ線グラフはY2軸を使用しています。
※Y1軸は既定のY軸なので、系列に明示的に設定する必要はありません。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' ----軸の設定----
' X軸の設定
FlexChart1.AxisX.Min = 0
FlexChart1.AxisX.Max = 6
' 第1Y軸の設定 : (デフォルトY軸)
FlexChart1.AxisY.AxisLine = True
FlexChart1.AxisY.Min = 0
FlexChart1.AxisY.Max = 20
'flexChart1.AxisY.MajorUnit = 200;
FlexChart1.AxisY.Title = "件数"
' 第2Y軸の設定
Dim axisY2 As Axis = New Axis()
axisY2.AxisLine = True
axisY2.Min = 0
axisY2.Max = 200
axisY2.Position = Position.Right
axisY2.Title = "売上"
' データの作成
Dim dt As DataTable = New DataTable()
dt.Columns.Add("X", GetType(Integer))
dt.Columns.Add("Y1", GetType(Double))
dt.Columns.Add("Y2", GetType(Double))
dt.Columns.Add("Y3", GetType(Double))
dt.Columns.Add("Y4", GetType(Double))
dt.Columns.Add("Y5", GetType(Double))
dt.Rows.Add(1, 1.5R, 2.0R, 5.0R, 2.0R, 90.0R)
dt.Rows.Add(2, 2.0R, 4.0R, 4.0R, 6.0R, 180.0R)
dt.Rows.Add(3, 2.5R, 1.0R, 3.0R, 4.0R, 140.0R)
dt.Rows.Add(4, 1.0R, 3.0R, 3.0R, 7.0R, 170.0R)
dt.Rows.Add(5, 3.5R, 3.0R, 3.0R, 5.0R, 190.0R)
dt.AcceptChanges()
' 積層棒グラフ
Dim series1 As Series = New Series() With {
.Binding = "Y1",
.StackingGroup = 0,
.ChartType = ChartType.Column
}
Dim series2 As Series = New Series() With {
.Binding = "Y2",
.StackingGroup = 0,
.ChartType = ChartType.Column
}
Dim series3 As Series = New Series() With {
.Binding = "Y3",
.StackingGroup = 0,
.ChartType = ChartType.Column
}
Dim series4 As Series = New Series() With {
.Binding = "Y4",
.StackingGroup = 0,
.ChartType = ChartType.Column
}
' 折れ線グラフ
Dim series5 As Series = New Series() With {
.ChartType = C1.Chart.ChartType.LineSymbols,
.Binding = "Y5",
.AxisY = axisY2
}
' チャートの設定
FlexChart1.Stacking = Stacking.Stacked
FlexChart1.BindingX = "X"
FlexChart1.DataSource = dt
FlexChart1.Series.Clear()
FlexChart1.Series.Add(series1)
FlexChart1.Series.Add(series2)
FlexChart1.Series.Add(series3)
FlexChart1.Series.Add(series4)
FlexChart1.Series.Add(series5)
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
namespace _20250214a
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// ----軸の設定----
// X軸の設定
flexChart1.AxisX.Min = 0;
flexChart1.AxisX.Max = 6;
// 第1Y軸の設定 : (デフォルトY軸)
flexChart1.AxisY.AxisLine = true;
flexChart1.AxisY.Min = 0;
flexChart1.AxisY.Max = 20;
//flexChart1.AxisY.MajorUnit = 200;
flexChart1.AxisY.Title = "件数";
// 第2Y軸の設定
Axis axisY2 = new Axis();
axisY2.AxisLine = true;
axisY2.Min = 0;
axisY2.Max = 200;
axisY2.Position = Position.Right;
axisY2.Title = "売上";
// データの作成
DataTable dt = new DataTable();
dt.Columns.Add("X", typeof(Int32));
dt.Columns.Add("Y1", typeof(double));
dt.Columns.Add("Y2", typeof(double));
dt.Columns.Add("Y3", typeof(double));
dt.Columns.Add("Y4", typeof(double));
dt.Columns.Add("Y5", typeof(double));
dt.Rows.Add(1, 1.5d, 2d, 5d, 2d, 90d);
dt.Rows.Add(2, 2d, 4d, 4d, 6d, 180d);
dt.Rows.Add(3, 2.5d, 1d, 3d, 4d, 140d);
dt.Rows.Add(4, 1d, 3d, 3d, 7d, 170d);
dt.Rows.Add(5, 3.5d, 3d, 3d, 5d, 190d);
dt.AcceptChanges();
// 積層棒グラフ
Series series1 = new Series()
{
Binding = "Y1",
StackingGroup = 0,
ChartType = ChartType.Column
};
Series series2 = new Series()
{
Binding = "Y2",
StackingGroup = 0,
ChartType = ChartType.Column
};
Series series3 = new Series()
{
Binding = "Y3",
StackingGroup = 0,
ChartType = ChartType.Column
};
Series series4 = new Series()
{
Binding = "Y4",
StackingGroup = 0,
ChartType = ChartType.Column
};
// 折れ線グラフ
Series series5 = new Series()
{
ChartType = C1.Chart.ChartType.LineSymbols,
Binding = "Y5",
AxisY = axisY2
};
// チャートの設定
flexChart1.Stacking = Stacking.Stacked;
flexChart1.BindingX = "X";
flexChart1.DataSource = dt;
flexChart1.Series.Clear();
flexChart1.Series.Add(series1);
flexChart1.Series.Add(series2);
flexChart1.Series.Add(series3);
flexChart1.Series.Add(series4);
flexChart1.Series.Add(series5);
}
}
}