C# PR

【C# Form】LiveChartの使い方を分かりやすく解説【全体コード付】

記事内に商品プロモーションを含む場合があります

はじめに

C#のFormプログラムでLiveChartを使う方法を、プロジェクトを作成するところから解説していきます。

この記事の内容
  • LiveChartのGIF動画
  • NuGetでのLiveChartのインストール方法
  • LiveChartのコントロールの追加方法
  • 折れ線グラフを表示する全体コード

「LiveChartって何?」という方は、初めにこちらの紹介記事を参照してください。

LiveChartの折れ線グラフ

後述する全体コードを実行すると、以下のアニメーション付のグラフが表示できます。

環境

解説している環境は以下の通りです。
H/W環境がかなり古いため、LiveChartの拡大・縮小・移動時に操作がもたつく感じがありました。
使用する際は比較的新しいPCで実行することをおすすめします。

環境バージョンなど備考
VisualStudio   2019 Community 2017でも使用できます
.NET4.7.2
プロジェクトWindowsFormアプリケーション 
OSWindows 7 32bitWn10でも使用できます
CPUi5 3427U 1.8GHz × 2
メモリ4GB

NugetでのLiveChartのインストール方法

プロジェクトの作成

VisualStudioの新規プロジェクトでWindowsFormプログラムを選択して、「次へ」を押します。

新しいプロジェクトの構成


プロジェクトの名称、ファイルの保存場所を設定し、「作成」を押します。
(設定内容がよく分からない場合は、デフォルト設定のままでOKです)

NuGetでLiveChartをインストール

VisualStudioのメニューの「プロジェクト」から、「NuGetパッケージの管理」を選択します。

開いたウインド内で「参照」を選択し、検索欄に「LiveChart」と入力します。
LiveChart.WinFormsを選択して「インストール」を押します。

これでLiveChartのインストールは完了です。
続いて、LiveChartのコントロールをフォームに追加します。

LiveChartのコントロールの追加方法

フォームにLiveChartのコントロール(グラフが描画される部分)を追加します。

ソリューションエクスプローラー内の「Form1.cs」を右クリックして、「デザイナーの表示」をクリックします。

ツールボックスから、「LiveChart.WinForms」を選択し、開いた中の「CartesianChart」(直行座標のチャート)をフォームにドラック&ドロップします。

これでコントロールの追加も完了です。
※ フォーム、コントロールの大きさは適宜変更してください。

全体コード

GIF動画で紹介したグラフを表示する全体コードです。
前述したLiveChartのコントロールが追加されていることを前提としています。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

using System.Windows.Media;

using LiveCharts;
using LiveCharts.Wpf;

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

            // cartesian(直交座標)のグラフを管理するオブジェクトを生成します
            cartesianChart1.Series = new SeriesCollection();

            //
            // 1つ目の折れ線グラフのデータです
            //
            Series series1 = new LineSeries();

            // 凡例の名称です
            series1.Title = "Series 1";

            // Y軸のポイントデータです
            series1.Values = new ChartValues<double> { 4, 6, 5, 2, 7 };

            // ポイントを示す図形の形状です(図形なし)
            series1.PointGeometry = null;

            //
            // 2つ目の折れ線グラフのデータです
            //
            Series series2 = new LineSeries();
            series2.Title = "Series 2";
            series2.Values = new ChartValues<double> { 6, 7, 3, 4, 6 };

            // ポイントを示す図形を設定しない場合は、丸が適用されます。


            //
            // 3つ目の折れ線グラフのデータです
            //

            // なぜかコンストラクタでないと、ポイントの図形の大きさが設定できないので、
            // ここで設定しています。
            //
            Series series3 = new LineSeries()
            {
                PointGeometrySize = 20.0,
            };

            series3.Title = "Series 3";
            series3.Values = new ChartValues<double> { 5, 2, 8, 3 };

            // ポイントを示す図形を四角に設定します
            series3.PointGeometry = DefaultGeometries.Square;


            // グラフ管理のオブジェクトに線を追加します
            cartesianChart1.Series.Add(series1);
            cartesianChart1.Series.Add(series2);
            cartesianChart1.Series.Add(series3);


            // X軸の設定です
            cartesianChart1.AxisX.Add(new Axis
            {
                Title = "曜日",
                Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" }
            });

            // Y軸の設定です
            cartesianChart1.AxisY.Add(new Axis
            {
                Title = "値",
            });

            // 凡例の位置を設定します
            cartesianChart1.LegendLocation = LegendLocation.Right;

            // 拡大・縮小を許可します
            cartesianChart1.Zoom = ZoomingOptions.Xy;
        }
    }
}

まとめ

C#のFormプログラムでLiveChartを使う方法を解説しました。参考になればうれしいです。

お知らせ

今月号のSoftware Designは「もっとTypeScriptの力を引き出そう」

JavaScriptの拡張言語でしょ?と思っているかたへ、Union型などTypeScriptの持つ秘めたる力を解説する特集となっています。

個人的には第2特集の「Ubuntuの現代的な使い方」がの方が気になりました。より詳しい内容は以下のリンクからご覧ください。

その他のグラフライブラリ

無料で使える「ScottPlot」というグラフライブラリも詳細に解説しています。「アニメーションは無くてもいいや」という方は、以下の記事も参考にしてみてください。

「大人の事情で外部ライブラリが使えない」という方には、以下の記事でMS純正のChartコントロールの解説もしています。よろしければ以下の記事も参考にしてみてください。

質問・要望 大歓迎です

「こんな解説記事作って」「こんなことがしたいけど、〇〇で困ってる」など、コメント欄で教えてください。 質問・要望に、中の人ができる限り対応します。

使えたよ・設定できたよの一言コメントも大歓迎。気軽に足跡を残してみてください。記事を紹介したい方はブログ、SNSにバシバシ貼ってもらってOKです。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です