作成日: 2022/02/22 最終更新日: 2022/02/22
文書種別
使用方法
詳細
棒グラフの棒を任意の色に変更するための様々な方法を紹介します。
■チャート全体の棒の色変更■
FlexChart全体の色を変更するには、Paletteプロパティを使用します。
以下に、カスタムパレットを使用して棒の色を緑色に変更するコードを記載します。
◎サンプルコード(VB)
■シリーズごとに色を変更■
(1)シリーズのStyle.FillColorを使用する方法
複数のシリーズが存在する場合、シリーズのStyle.FillColorを使用すると、シリーズごとに棒の色を簡単に設定できます。
◎サンプルコード(VB)
(2)FlexChartのPaletteプロパティを使用する方法
FlexChartのPaletteプロパティを「Custom」に設定し、カスタムのパレットにシリーズの数だけブラシを追加することでも、シリーズごとの棒の色を設定することができます。(1)のコードの「棒の色を設定」部分を以下のように変更して、動作をご確認下さい。
◎サンプルコード(VB)
なお、パレットとして、組み込みのパレットを指定することも可能です。以下に組み込みの「Cocoa」パレットを用いる例を記載します。「棒の色を設定」部分を下記のように変更して、動作をご確認下さい。

◎サンプルコード(VB)
■チャート全体の棒の色変更■
FlexChart全体の色を変更するには、Paletteプロパティを使用します。
以下に、カスタムパレットを使用して棒の色を緑色に変更するコードを記載します。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' データテーブルの設定
Dim dt As DataTable = New DataTable()
dt.Columns.Add(New DataColumn("ID", GetType(Integer)))
dt.Columns.Add(New DataColumn("個数", GetType(Integer)))
dt.Rows.Add(0, 10)
dt.Rows.Add(1, 50)
dt.Rows.Add(2, 60)
dt.Rows.Add(3, 30)
' チャートタイプの設定
FlexChart1.ChartType = ChartType.Column
' FlexChartへのバインド
FlexChart1.DataSource = dt
FlexChart1.BindingX = "ID"
FlexChart1.Binding = "個数"
' カスタムパレット
FlexChart1.Palette = Palette.Custom
Dim custPalette As New List(Of Brush)()
custPalette.Add(New SolidBrush(Color.Green))
FlexChart1.CustomPalette = custPalette
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
namespace prj_C1FlexChart
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
// チャートタイプの設定
flexChart1.ChartType = ChartType.Column;
//データテーブルの設定
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
dt.Columns.Add(new DataColumn("個数", typeof(Int32)));
dt.Rows.Add(0, 10);
dt.Rows.Add(1, 50);
dt.Rows.Add(2, 60);
dt.Rows.Add(3, 30);
// FlexChartへのバインド
flexChart1.DataSource = dt;
flexChart1.BindingX = "ID";
flexChart1.Binding = "個数";
}
private void Form1_Load(object sender, EventArgs e)
{
// 棒の色を設定
flexChart1.Palette = Palette.Custom;
flexChart1.CustomPalette = new List()
{
new SolidBrush(Color.Green)
};
}
}
}
■シリーズごとに色を変更■
(1)シリーズのStyle.FillColorを使用する方法
複数のシリーズが存在する場合、シリーズのStyle.FillColorを使用すると、シリーズごとに棒の色を簡単に設定できます。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' データテーブルの設定
Dim dt1 As DataTable = New DataTable()
dt1.Columns.Add(New DataColumn("ID", GetType(Integer)))
dt1.Columns.Add(New DataColumn("個数", GetType(Integer)))
dt1.Rows.Add(0, 10)
dt1.Rows.Add(1, 50)
dt1.Rows.Add(2, 60)
dt1.Rows.Add(3, 30)
Dim dt2 As DataTable = New DataTable()
dt2.Columns.Add(New DataColumn("ID", GetType(Integer)))
dt2.Columns.Add(New DataColumn("個数", GetType(Integer)))
dt2.Rows.Add(0, 40)
dt2.Rows.Add(1, 10)
dt2.Rows.Add(2, 20)
dt2.Rows.Add(3, 50)
' シリーズへのバインド
FlexChart1.Series.Clear()
Dim series1 As Series = New Series()
series1.ChartType = ChartType.Column 'チャートタイプの設定
series1.DataSource = dt1
series1.BindingX = "ID"
series1.Binding = "個数"
series1.Name = "Series1"
FlexChart1.Series.Add(series1)
Dim series2 As Series = New Series()
series2.ChartType = ChartType.Column 'チャートタイプの設定
series2.DataSource = dt2
series2.BindingX = "ID"
series2.Binding = "個数"
series2.Name = "Series2"
FlexChart1.Series.Add(series2)
' 棒の色を設定(シリーズのStyle.FillColorを使用)
FlexChart1.Series(0).Style.FillColor = System.Drawing.Color.Green
FlexChart1.Series(1).Style.FillColor = System.Drawing.Color.Blue
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
namespace prj_C1FlexChart
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
// チャートタイプの設定
flexChart1.ChartType = ChartType.Column;
//データテーブルの設定
DataTable dt1 = new DataTable();
dt1.Columns.Add(new DataColumn("ID", typeof(Int32)));
dt1.Columns.Add(new DataColumn("個数", typeof(Int32)));
dt1.Rows.Add(0, 10);
dt1.Rows.Add(1, 50);
dt1.Rows.Add(2, 60);
dt1.Rows.Add(3, 30);
DataTable dt2 = new DataTable();
dt2.Columns.Add(new DataColumn("ID", typeof(Int32)));
dt2.Columns.Add(new DataColumn("個数", typeof(Int32)));
dt2.Rows.Add(0, 40);
dt2.Rows.Add(1, 10);
dt2.Rows.Add(2, 20);
dt2.Rows.Add(3, 50);
// シリーズへのバインド
flexChart1.Series.Clear();
Series series1 = new Series();
series1.ChartType = ChartType.Column;
series1.DataSource = dt1;
series1.BindingX = "ID";
series1.Binding = "個数";
series1.Name = "Series1";
flexChart1.Series.Add(series1);
Series series2 = new Series();
series2.ChartType = ChartType.Column;
series2.DataSource = dt2;
series2.BindingX = "ID";
series2.Binding = "個数";
series2.Name = "Series2";
flexChart1.Series.Add(series2);
}
private void Form1_Load(object sender, EventArgs e)
{
// 棒の色を設定(シリーズのStyle.FillColorを使用)
flexChart1.Series[0].Style.FillColor = System.Drawing.Color.Green;
flexChart1.Series[1].Style.FillColor = System.Drawing.Color.Blue;
}
}
}
(2)FlexChartのPaletteプロパティを使用する方法
FlexChartのPaletteプロパティを「Custom」に設定し、カスタムのパレットにシリーズの数だけブラシを追加することでも、シリーズごとの棒の色を設定することができます。(1)のコードの「棒の色を設定」部分を以下のように変更して、動作をご確認下さい。
◎サンプルコード(VB)
' 棒の色を設定(カスタムパレットを使用)
FlexChart1.Palette = Palette.Custom
Dim custPalette As New List(Of Brush)()
custPalette.Add(New SolidBrush(Color.Green))
custPalette.Add(New SolidBrush(Color.Blue))
FlexChart1.CustomPalette = custPalette
◎サンプルコード(C#)
// 棒の色を設定(カスタムパレットを使用)
flexChart1.Palette = Palette.Custom;
flexChart1.CustomPalette = new List()
{
new SolidBrush(Color.Green),
new SolidBrush(Color.Blue)
};
なお、パレットとして、組み込みのパレットを指定することも可能です。以下に組み込みの「Cocoa」パレットを用いる例を記載します。「棒の色を設定」部分を下記のように変更して、動作をご確認下さい。

◎サンプルコード(VB)
' 組み込みの「Cocoa」パレットを使用
FlexChart1.Palette = C1.Chart.Palette.Cocoa
◎サンプルコード(C#)
//組み込みの「Cocoa」パレットを使用
flexChart1.Palette = C1.Chart.Palette.Cocoa;