作成日: 2022/02/25    最終更新日: 2022/02/25

文書種別

使用方法

詳細

X軸やY軸で、軸タイトルの色、軸や目盛の色、グリッド線の色は、それぞれFlexChartの下記プロパティで設定可能です。

・軸タイトルの色：AxisX(Y).TitleStyle.StrokeColor
・軸と目盛の色　：AxisX(Y).Style.StrokeColor
・グリッド線の色：AxisX(Y).MajorGridStyle.StrokeColor

以下に、X軸、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
        ' データテーブルの設定
        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.Series(0).Name = ""

        ' X軸
        FlexChart1.AxisX.TitleStyle.Font = New Font("MS ゴシック", 8, FontStyle.Italic)  ' 軸タイトルのフォント
        FlexChart1.AxisX.TitleStyle.StrokeColor = Color.Blue  ' 軸タイトルの色
        FlexChart1.AxisX.Style.StrokeColor = Color.DarkBlue  ' 軸と目盛の色
        FlexChart1.AxisX.Style.StrokeWidth = 4  ' 軸の太さ
        FlexChart1.AxisX.Style.LinePattern = LinePatternEnum.Dot  ' 軸のパターン

        ' Y軸
        FlexChart1.AxisY.AxisLine = True  ' 明示的に表示（デフォルトでは非表示のため）
        FlexChart1.AxisY.Title = "商品の数"  ' 軸タイトル
        FlexChart1.AxisY.TitleStyle.Font = New Font("MS ゴシック", 10, FontStyle.Bold)  'タイトルのフォント
        FlexChart1.AxisY.TitleStyle.StrokeColor = Color.LightGreen  ' 軸タイトルの色
        FlexChart1.AxisY.Style.StrokeColor = Color.DarkGreen  ' 軸と目盛の色
        FlexChart1.AxisY.MajorGridStyle.StrokeColor = Color.LightPink  ' グリッド線の色
        FlexChart1.AxisY.Style.StrokeWidth = 2  ' 軸の太さ
    End Sub
End Class

◎サンプルコード（C#）

using C1.Chart;
using C1.Win.Chart;

namespace prj_C1FlexChart
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            //データテーブルの設定
            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);

            // チャートタイプの設定
            flexChart1.ChartType = ChartType.Column;
            // FlexChartへのバインド
            flexChart1.DataSource = dt;
            flexChart1.BindingX = "ID";
            flexChart1.Binding = "個数";

            flexChart1.Series[0].Name = "";
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // X軸
            flexChart1.AxisX.Title = "ID番号"; // 軸タイトル
            flexChart1.AxisX.TitleStyle.Font = new Font("MS ゴシック", 8, FontStyle.Italic);  // 軸タイトルのフォント
            flexChart1.AxisX.TitleStyle.StrokeColor = Color.Blue;  // 軸タイトルの色
            flexChart1.AxisX.Style.StrokeColor = Color.DarkBlue;  // 軸と目盛の色
            flexChart1.AxisX.Style.StrokeWidth = 4;  // 軸の太さ
            flexChart1.AxisX.Style.LinePattern = LinePatternEnum.Dot;  // 軸のパターン

            // Y軸
            flexChart1.AxisY.AxisLine = true;  //明示的に表示（デフォルトでは非表示のため）
            flexChart1.AxisY.Title = "商品の数"; // 軸タイトル
            flexChart1.AxisY.TitleStyle.Font = new Font("MS ゴシック", 10, FontStyle.Bold);  //タイトルのフォント
            flexChart1.AxisY.TitleStyle.StrokeColor = Color.LightGreen;  // 軸タイトルの色
            flexChart1.AxisY.Style.StrokeColor = Color.DarkGreen;  // 軸と目盛の色
            flexChart1.AxisY.MajorGridStyle.StrokeColor = Color.LightPink;  // グリッド線の色
            flexChart1.AxisY.Style.StrokeWidth = 2;  // 軸の太さ
        }
    }
}