【C#】Chartを使ったヒストグラム表示

シェアする

  • このエントリーをはてなブックマークに追加
最近の記事
  • 8/22 【Neural Network Console】CPU/GPU処理の設定切替
  • 8/21 【Neural Network Console】Learning Rate(学習率)の設定
  • 8/20 ソニーの無償AIソフト Neural Network Consoleの入手ダウンロード、インストール
  • 8/20 Deep Learning
  • 8/20
  • 8/19 古いバージョンのVisual Studio Community/Expressの入手ダウンロード
  • 8/19 CUDAの入手、ダウンロード、インストール方法
  • 8/17 【C#.NET】マイクロソフト仕様のアフィン変換
  • 8/5 【C#】ファイルを開くダイアログボックスの表示
  • 8/2 キャノンプリンターのCDトレイはどこ?!
  • 7/6 【参考書籍】画像処理・機械学習プログラミング OpenCV 3対応
  • 6/20 【Python,matplotlib】動くグラフをAnimationGifに保存する方法
  • 6/17 シグモイド関数の微分
  • 6/15 シグモイド関数
  • 6/13 合成関数の微分
  • 6/12 WordPressで数式エディタ風に数式を入力したい
  • 6/11 PythonをVisual Studioでインストールする方法
  • 6/9 【Python】OpenCVをAnacondaでインストール(Windows編)
  • 6/6 【Python】Anacondaで複数バージョンの環境切り替え
  • 6/6 画像センシング展2017に出展します。
  • 6/1 【Office365】Web版Outlookのフォントサイズ変更
  • 6/1 【Anaconda】モジュールのアップデートでエラー発生
  • 6/1 【Anaconda】コマンドリストの表示
  • 5/29 Windows10パソコン購入
  • 5/24 Anacondaのアンインストール
  • 5/24 【Jupyter Notebook】新規プログラムの作成
  • 5/23 【Python】開発環境の構築
  • 5/23 Pythonはじめました
  • 4/6 【Office365】Web版Outlookのスレッド表示を解除する方法
  • 4/5 【Excel】フーリエ解析(FFT)
  • 3/20 Canny edge detection
  • 3/20 【Excel2016】分析ツールの表示
  • 3/5 【Visual Studio】黒い背景色を白に変更する方法
  • 2/8 【Windows10】拡張モニタに表示されたウィンドウを元に戻す
  • 2/7 複素数の計算
  • 1/18 【Excel】棒グラフの横軸の目盛を0始まりにする
  • 1/16 【Excel】フーリエ変換
  • 1/6 【OpenCV】疑似カラー(カラーマップ)
  • 11/8 【Visual Studio】検索結果のウィンドウ表示
  • 11/3 ニコン 一眼レフカメラ D5500レビュー
  • 10/26 カラーカメラはモノクロカメラを兼ねない
  • 9/6 (Free Soft)Animation GIF Builder
  • 8/30 【C#】タブの無いTabControlっぽいものを作る
  • 8/29 【OpenCvSharp】サンプルプログラムの公開
  • 8/28 【PowerPoint】部分的にカラーにする(セレクトカラー処理)
  • 8/27 【C#】引数の値渡し、参照渡し(ref, out)
  • 8/26 【Word/Excel】図形内に文字を挿入する
  • 8/25 【C#】NumericUpDownコントロール
  • 8/24 ニコン D3400 VS D5500 仕様比較
  • 8/22 【C#】MDIフォームにリサイズ可能なPanelを設置する

  • Chartコントロールを使いたかった理由の一つに画像処理ではおなじみのヒストグラムをChartコントロールで表示したかったのですが、その簡単なプログラムです。

    フォームにはChartコントロールを配置し、Chartの名前がchart1とした事を前提として、

    // /////////////////////////////////////////////////////
    // Chartコントロール内のグラフ、凡例、目盛り領域を削除
    chart1.Series.Clear();
    chart1.Legends.Clear();
    chart1.ChartAreas.Clear();
    
    // /////////////////////////////////////////////////////
    // 目盛り領域の設定
    var ca = chart1.ChartAreas.Add("Histogram");
    
    // X軸
    ca.AxisX.Title = "Brightness";  // タイトル
    ca.AxisX.Minimum = 0;           // 最小値
    ca.AxisX.Maximum = 256;         // 最大値
    ca.AxisX.Interval = 64;         // 目盛りの間隔
    // Y軸
    ca.AxisY.Title = "Count";
    ca.AxisY.Minimum = 0;
    
    // /////////////////////////////////////////////////////
    // データの追加
    var hist = new Point[] {
        new Point(32, 10),
        new Point(96, 30),
        new Point(160, 50),
        new Point(224, 20)
    };
    
    // グラフの系列を追加
    var s = chart1.Series.Add("Histogram");
    // 棒グラフの隙間を無くす
    s.SetCustomProperty("PointWidth", "1.0");
    // データ設定
    for (int i = 0; i < hist.Length; i++) {
        s.Points.AddXY(hist[i].X, hist[i].Y);
    }
    

    と書くだけで、モノクロ画像用のヒストグラムが簡単に作成できます。

    (実行結果)

    C# Chart Histogram

    ここでのポイントとしては、棒グラフ(ChartTypeColumn)の時に、棒グラフの間隔を無くすにはPointWidthプロパティを1.0にすればよい(デフォルトは0.8)のですが、各グラフ特有のプロパティ設定は以下のように設定する必要があります。

    (直接プロパティの設定ができません。)

    // 棒グラフの隙間を無くす
    s.SetCustomProperty("PointWidth", "1.0");
    

    モノクロ画像の時はこれでもよいのですが、カラーだと、R,G,Bの3つのグラフを書かないといけないので、折れ線では表現しにくいので、折れ線(ChartTypeLine)を使ってみたいと思います。

    要領は同じで、SeriesにR,G,B用の3つを追加することぐらいです。

    // /////////////////////////////////////////////////////
    // Chartコントロール内のグラフ、凡例、目盛り領域を削除
    chart1.Series.Clear();
    chart1.Legends.Clear();
    chart1.ChartAreas.Clear();
    
    // /////////////////////////////////////////////////////
    // 目盛り領域の設定
    var ca = chart1.ChartAreas.Add("Histogram");
    
    // X軸
    ca.AxisX.Title = "Brightness";  // タイトル
    ca.AxisX.Minimum = 0;           // 最小値
    ca.AxisX.Maximum = 256;         // 最大値
    ca.AxisX.Interval = 64;         // 目盛りの間隔
    // Y軸
    ca.AxisY.Title = "Count";
    ca.AxisY.Minimum = 0;
    
    // /////////////////////////////////////////////////////
    // データの追加
    var histR = new Point[] {
        new Point(0, 10),
        new Point(63, 30),
        new Point(127, 80),
        new Point(191, 30),
        new Point(255, 15)
    };
    var histG = new Point[] {
        new Point(0, 70),
        new Point(63, 60),
        new Point(127, 40),
        new Point(191, 20),
        new Point(255, 10)
    };
    var histB = new Point[] {
        new Point(0, 10),
        new Point(63, 20),
        new Point(127, 30),
        new Point(191, 70),
        new Point(255, 90)
    };
    
    // グラフの系列を追加
    var sR = chart1.Series.Add("HistogramR");
    var sG = chart1.Series.Add("HistogramG");
    var sB = chart1.Series.Add("HistogramB");
    
    // グラフの種類を折れ線に設定する
    sR.ChartType = sG.ChartType = sB.ChartType 
        = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
    
    // データ設定
    for (int i = 0; i < histR.Length; i++)
    {
        sR.Points.AddXY(histR[i].X, histR[i].Y);
        sG.Points.AddXY(histG[i].X, histG[i].Y);
        sB.Points.AddXY(histB[i].X, histB[i].Y);
    }
    

    (実行結果)

    C# Chart Histogram

    これでカラーのヒストグラムも表示できる事ができます!

    とか言っても、見た目があまりにもショボイので、もう少し手を入れます。

    今度はグラフの種類にスプライン面グラフ(SeriesChartType.SplineArea)を使ってみます。

    // /////////////////////////////////////////////////////
    // Chartコントロール内のグラフ、凡例、目盛り領域を削除
    chart1.Series.Clear();
    chart1.Legends.Clear();
    chart1.ChartAreas.Clear();
    
    // /////////////////////////////////////////////////////
    // 目盛り領域の設定
    var ca = chart1.ChartAreas.Add("Histogram");
    
    // X軸
    ca.AxisX.Title = "Brightness";  // タイトル
    ca.AxisX.Minimum = 0;           // 最小値
    ca.AxisX.Maximum = 256;         // 最大値
    ca.AxisX.Interval = 64;         // 目盛りの間隔
    // Y軸
    ca.AxisY.Title = "Count";
    ca.AxisY.Minimum = 0;
    
    // /////////////////////////////////////////////////////
    // データの追加
    var histR = new Point[] {
        new Point(0, 10),
        new Point(63, 30),
        new Point(127, 80),
        new Point(191, 30),
        new Point(255, 15)
    };
    var histG = new Point[] {
        new Point(0, 70),
        new Point(63, 60),
        new Point(127, 40),
        new Point(191, 20),
        new Point(255, 10)
    };
    var histB = new Point[] {
        new Point(0, 10),
        new Point(63, 20),
        new Point(127, 30),
        new Point(191, 70),
        new Point(255, 90)
    };
    
    // グラフの系列を追加
    var sR = chart1.Series.Add("HistogramR");
    var sG = chart1.Series.Add("HistogramG");
    var sB = chart1.Series.Add("HistogramB");
    
    // グラフの種類をスプライン面グラフに設定する
    sR.ChartType = sG.ChartType = sB.ChartType
        = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.SplineArea;
    
    // 輪郭線の太さ
    sR.BorderWidth = sG.BorderWidth = sB.BorderWidth = 2;
    
    // 輪郭線の色
    sR.BorderColor = Color.Red;
    sG.BorderColor = Color.Green;
    sB.BorderColor = Color.Blue;
    
    // 塗りつぶしの色の設定(半透明)
    sR.Color = Color.FromArgb(150, Color.Red);
    sG.Color = Color.FromArgb(150, Color.Green);
    sB.Color = Color.FromArgb(150, Color.Blue);
    
    // データ設定
    for (int i = 0; i < histR.Length; i++)
    {
        sR.Points.AddXY(histR[i].X, histR[i].Y);
        sG.Points.AddXY(histG[i].X, histG[i].Y);
        sB.Points.AddXY(histB[i].X, histB[i].Y);
    }
    

    (実行結果)

    C# Chart Histogram

    これで、かなりそれっぽくないですか?

    プログラム的に書くと、塗りつぶしの色に半透明の色を設定できるところがポイントでしょうかね。

    Chartコントロールの使用方法へ戻る