【C# WPF OxyPlot】円グラフの一部を切り出す方法

C# WPFアプリケーションにおいて、OxyPlotを使用して、円グラフの一部を切り出す方法を書きます。一部を切り出すことで、強調したいところを目立たせることができます

開発環境
  • Windows10
  • Microsoft Visual Studio Community2022
  • .NET 6
  • WPF アプリ
  • OxyPlot 2.1.2
目次

やりたいこと

やりたいことは、↓のように、円グラフの一部を切り取り強調して表示することです。

コード

  • 強調する部分は、PieSlice のIsExplodedプロパティをtrueとします。
  • PieSeries のExplodedDistance で、強調時の円の中心からの距離を設定します。
using OxyPlot;
using OxyPlot.Series;
using System;
using System.Collections.Generic;

namespace OxyPlotProject.OxyPlotPlotModel
{
    /// <summary>
    /// 円グラフPlotModelファクトリー
    /// </summary>
    internal class PieSeriesPlotModelFactory : AbstPlotModelFactory
    {
        /// <summary>
        /// 
        /// </summary>
        /// <remarks>
        /// Item1 : ラベル名
        /// Item2 : 商品売り上げ値
        /// Item3 : 切り抜きフラグ
        /// Item4 : 背景色
        /// </remarks>
        private List<Tuple<string, double,bool,OxyColor>> PieSliceList = new List<Tuple<string, double,bool, OxyColor>>()
        {
            new Tuple<string, double,bool,OxyColor>( "商品A", 25394, true, OxyColors.Red),
            new Tuple<string, double,bool,OxyColor>( "商品B", 20343, false, OxyColors.DarkGray),
            new Tuple<string, double,bool,OxyColor>( "商品C", 15400, false, OxyColors.DarkGray),
            new Tuple<string, double,bool,OxyColor>( "商品D", 10200, false, OxyColors.DarkGray),
            new Tuple<string, double,bool,OxyColor>( "その他", 9200, false, OxyColors.DarkGray),
        };

        public override PlotModel Create()
        {
            // モデル
            PlotModel plotModel = new PlotModel();
            plotModel.Title = "商品-売上割合 円グラフ";
            plotModel.TitlePadding= 20;                     // タイトルのパディング

            // パイシリーズ
            PieSeries pieSeries = new PieSeries();

            pieSeries.InsideLabelColor = OxyColors.White;   // 内部ラベルの色
            pieSeries.InsideLabelPosition = 0.7;            // 内部ラベル位置

            pieSeries.FontSize = 18;                        // フォントサイズ

            pieSeries.Stroke = OxyColors.WhiteSmoke;        // ボーダーの色
            pieSeries.StrokeThickness = 3;                  // ボーダーの幅
            
            pieSeries.TickDistance = 4;                     // 円の端と、割合の線の距離

            pieSeries.StartAngle = -90;                     // データの開始角度
            pieSeries.ExplodedDistance = 0.1;               // 円の中心からの距離

            // データ設定
            foreach ( Tuple<string, double, bool, OxyColor> tuple in PieSliceList)
            {
                PieSlice pieSlice = new PieSlice(tuple.Item1, tuple.Item2);
                pieSlice.IsExploded = tuple.Item3;          // 強調するときはtrue
                pieSlice.Fill = tuple.Item4;                // 強調するときは色を変える

                pieSeries.Slices.Add(pieSlice);
            }

            plotModel.Series.Add(pieSeries);

            return plotModel;
        }
    }
}

円の中心からPieSlice の距離は、では、強調時、

円の中心からPieSlice の距離 = ExplodedDistance * PlotModelの幅か高さの小さい方/2

となります。

ただし、ここのコードはTODOとなっていました。今後変更されるかもしれません。ここでは、OxyPlot 2.1.2を使用しています。

プロジェクトを実行したところ↓のグラフを表示できました。

プロジェクトは↓からダウンロードできます。

GitHub
GitHub - HomeProgrammer81/OxyPlotProject at main_pie_broach Contribute to HomeProgrammer81/OxyPlotProject development by creating an account on GitHub.

まとめ

C# WPFアプリケーションにおいて、OxyPlotを使用して、円グラフの一部を切り出す方法を書きました。一部を切り出すことで、強調したいところを目立たせることができます

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次