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

文書種別

使用方法

詳細

バブルチャートを表示するには、フォームに「FlexChart」コントロールを配置し、ChartTypeプロパティを「Bubble」に設定します。

また、１つのデータ点について、位置を示す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 New DataTable()
        dt.Columns.Add("Item", GetType(String))
        dt.Columns.Add("X", GetType(Int32))
        dt.Columns.Add("Y", GetType(Int32))
        dt.Columns.Add("Value", GetType(Int32))
        dt.Rows.Add("A", 1, 1, 1)
        dt.Rows.Add("A", 2, 2, 2)
        dt.Rows.Add("A", 3, 3, 3)
        dt.Rows.Add("B", 1, 2, 2)
        dt.Rows.Add("B", 2, 3, 3)
        dt.Rows.Add("B", 3, 1, 1)
        dt.Rows.Add("C", 1, 3, 3)
        dt.Rows.Add("C", 2, 1, 1)
        dt.Rows.Add("C", 3, 2, 2)
        dt.AcceptChanges()

        Dim dv1 As DataView = dt.Copy().DefaultView
        dv1.RowFilter = "Item LIKE 'A'"
        Dim dv2 As DataView = dt.Copy().DefaultView
        dv2.RowFilter = "Item LIKE 'B'"
        Dim dv3 As DataView = dt.Copy().DefaultView
        dv3.RowFilter = "Item LIKE 'C'"

        ' シリーズの作成
        Dim series1 As Series = New Series()
        series1.Name = "A"
        series1.DataSource = dv1
        series1.Binding = "Y, Value"
        series1.BindingX = "X"

        Dim series2 As Series = New Series()
        series2.Name = "B"
        series2.DataSource = dv2
        series2.Binding = "Y, Value"
        series2.BindingX = "X"

        Dim series3 As Series = New Series()
        series3.Name = "C"
        series3.DataSource = dv3
        series3.Binding = "Y, Value"
        series3.BindingX = "X"

        ' バブルチャートの設定
        FlexChart1.ChartType = ChartType.Bubble
        FlexChart1.Options.BubbleMaxSize = 60
        FlexChart1.Options.BubbleMinSize = 20

        ' チャートの追加
        FlexChart1.Series.Clear()
        FlexChart1.Series.Add(series1)
        FlexChart1.Series.Add(series2)
        FlexChart1.Series.Add(series3)

        ' X軸の最小値・最大値の設定
        FlexChart1.AxisX.Min = 0
        FlexChart1.AxisX.Max = 4

        ' Y軸の最小値・最大値の設定
        FlexChart1.AxisY.Min = 0
        FlexChart1.AxisY.Max = 4
    End Sub
End Class

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

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

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

        private void Form1_Load(object sender, EventArgs e)
        {
            // データの作成
            var dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[]
            {
                new DataColumn("Item", typeof(String)),
                new DataColumn("X", typeof(Int32)),
                new DataColumn("Y", typeof(Int32)),
                new DataColumn("Value", typeof(Int32))
            });
            dt.Rows.Add("A", 1, 1, 1);
            dt.Rows.Add("A", 2, 2, 2);
            dt.Rows.Add("A", 3, 3, 3);
            dt.Rows.Add("B", 1, 2, 2);
            dt.Rows.Add("B", 2, 3, 3);
            dt.Rows.Add("B", 3, 1, 1);
            dt.Rows.Add("C", 1, 3, 3);
            dt.Rows.Add("C", 2, 1, 1);
            dt.Rows.Add("C", 3, 2, 2);
            dt.AcceptChanges();

            var dv1 = dt.Copy().DefaultView;
            dv1.RowFilter = "Item LIKE 'A'";
            var dv2 = dt.Copy().DefaultView;
            dv2.RowFilter = "Item LIKE 'B'";
            var dv3 = dt.Copy().DefaultView;
            dv3.RowFilter = "Item LIKE 'C'";

            // シリーズの作成
            var series1 = new Series();
            series1.Name = "A";
            series1.DataSource = dv1;
            series1.Binding = "Y, Value";
            series1.BindingX = "X";

            var series2 = new Series();
            series2.Name = "B";
            series2.DataSource = dv2;
            series2.Binding = "Y, Value";
            series2.BindingX = "X";

            var series3 = new Series();
            series3.Name = "C";
            series3.DataSource = dv3;
            series3.Binding = "Y, Value";
            series3.BindingX = "X";

            // バブルチャートの設定
            flexChart1.ChartType = ChartType.Bubble;
            flexChart1.Options.BubbleMaxSize = 60;
            flexChart1.Options.BubbleMinSize = 20;

            // チャートの追加
            flexChart1.Series.Clear();
            flexChart1.Series.Add(series1);
            flexChart1.Series.Add(series2);
            flexChart1.Series.Add(series3);

            // X軸の最小値・最大値の設定
            flexChart1.AxisX.Min = 0;
            flexChart1.AxisX.Max = 4;

            // Y軸の最小値・最大値の設定
            flexChart1.AxisY.Min = 0;
            flexChart1.AxisY.Max = 4;
        }
    }
}