【WinForm】チャート作成アプリのチュートリアル

2024年8月26日

このチュートリアルでは、中級者向けにC#とWinFormを使ったチャート作成アプリを作成します。このアプリを通じて、データの入力と編集、チャートの作成と更新、データの可視化などの技術を学べます。ユーザーはデータを手動で入力し、そのデータを基に棒グラフや折れ線グラフを生成できます。これにより、データを視覚的に表示するアプリケーションの開発スキルが向上します。

1. 1. プロジェクトのセットアップ
2. 2. 基本的なUIの配置
3. 3. データ入力とチャート作成の実装
- 3.1. まとめ

1. プロジェクトのセットアップ

Visual Studio を開き、新しい「Windows フォームアプリケーション (.NET Framework)」プロジェクトを作成します。
プロジェクト名を「ChartApp」にします。
Form1の名前をChartFormに変更し、Textプロパティも「チャート作成アプリ」に設定します。

2. 基本的なUIの配置

DataGridView コントロールをフォームに追加し、プロパティを次のように設定します:
- Name: dataGridView
- Dock: Top
- Height: 150
Button コントロールを3つ追加し、それぞれ次のように設定します:
- Name: addButton, Text: “データ追加"
- Name: updateButton, Text: “チャート更新"
- Name: clearButton, Text: “データクリア"
- それぞれのDock: Bottom
Chart コントロールをフォームに追加し、プロパティを次のように設定します:
- Name: chart
- Dock: Fill
ComboBox コントロールを追加し、プロパティを次のように設定します:
- Name: chartTypeComboBox
- Items: “Bar", “Line"
- SelectedIndex: 0
- Dock: Bottom

3. データ入力とチャート作成の実装

以下のコードを使って、チャート作成アプリの基本ロジックを実装します。

using System;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace ChartApp
{
    public partial class ChartForm : Form
    {
        public ChartForm()
        {
            InitializeComponent();
            InitializeChartApp();
        }

        private void InitializeChartApp()
        {
            chartTypeComboBox.SelectedIndexChanged += ChartTypeComboBox_SelectedIndexChanged;
            addButton.Click += AddButton_Click;
            updateButton.Click += UpdateButton_Click;
            clearButton.Click += ClearButton_Click;

            // 初期チャート設定
            chart.Series.Clear();
            chart.Series.Add("DataSeries");
            chart.Series["DataSeries"].ChartType = SeriesChartType.Bar;
            chart.ChartAreas.Add(new ChartArea("MainArea"));

            // DataGridViewにデータカラム追加
            dataGridView.Columns.Add("Label", "ラベル");
            dataGridView.Columns.Add("Value", "値");
        }

        private void ChartTypeComboBox_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (chartTypeComboBox.SelectedItem.ToString() == "Bar")
            {
                chart.Series["DataSeries"].ChartType = SeriesChartType.Bar;
            }
            else if (chartTypeComboBox.SelectedItem.ToString() == "Line")
            {
                chart.Series["DataSeries"].ChartType = SeriesChartType.Line;
            }
        }

        private void AddButton_Click(object sender, EventArgs e)
        {
            dataGridView.Rows.Add();
        }

        private void UpdateButton_Click(object sender, EventArgs e)
        {
            chart.Series["DataSeries"].Points.Clear();

            foreach (DataGridViewRow row in dataGridView.Rows)
            {
                if (row.Cells["Label"].Value != null && row.Cells["Value"].Value != null)
                {
                    string label = row.Cells["Label"].Value.ToString();
                    double value;
                    if (double.TryParse(row.Cells["Value"].Value.ToString(), out value))
                    {
                        chart.Series["DataSeries"].Points.AddXY(label, value);
                    }
                }
            }
        }

        private void ClearButton_Click(object sender, EventArgs e)
        {
            dataGridView.Rows.Clear();
            chart.Series["DataSeries"].Points.Clear();
        }
    }
}