【C# WPF OxyPlot】二重の円グラフを描画する方法

C# WPFアプリケーションにおいて、OxyPlot で二重の円グラフを描画する方法をお伝えします。

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

やりたいこと

やりたいことは、OxyPlot で↓のような二重の円グラフを描画することです。

コード

  • 円グラフは内側用、外側用で2つ用意する
  • 内側の円の半径と、外側の円の内円の半径を一致させる

1つの円グラフに対し、二重で描画するためのメソッド、プロパティは見つけられませんでした。

コードは↓のようになります。

using OxyPlot;
using OxyPlot.Legends;
using OxyPlot.Series;
using System;
using System.Collections.Generic;

namespace OxyPlotProject.OxyPlotPlotModel
{
    /// <summary>
    /// 円グラフ 二重 PlotModelファクトリー
    /// </summary>
    internal class PieSeriesPlotModelFactory : AbstPlotModelFactory
    {
        private List<Tuple<string, double, OxyColor>> pieDataList = new List<Tuple<string, double, OxyColor>>()
        {
            new Tuple<string, double, OxyColor>( "商品A", 25394, OxyColors.DarkBlue),
            new Tuple<string, double, OxyColor>( "商品B", 20343, OxyColors.YellowGreen),
            new Tuple<string, double, OxyColor>( "商品C", 15400, OxyColors.OrangeRed),
            new Tuple<string, double, OxyColor>( "商品D", 10200, OxyColors.ForestGreen),
            new Tuple<string, double, OxyColor>( "その他", 9200, OxyColors.Gray),
        };

        private List<Tuple<string, double, OxyColor>> subPieDataList = new List<Tuple<string, double, OxyColor>>()
        {
            new Tuple<string, double, OxyColor>( "A-1", 10000, OxyColors.DarkBlue),
            new Tuple<string, double, OxyColor>( "A-2", 10000, OxyColors.DarkBlue),
            new Tuple<string, double, OxyColor>( "A-3", 5394, OxyColors.DarkBlue),
            new Tuple<string, double, OxyColor>( "B-1", 10000, OxyColors.YellowGreen),
            new Tuple<string, double, OxyColor>( "B-2", 10343, OxyColors.YellowGreen),
            new Tuple<string, double, OxyColor>( "C-1", 10000, OxyColors.OrangeRed),
            new Tuple<string, double, OxyColor>( "C-2", 5400, OxyColors.OrangeRed),
            new Tuple<string, double, OxyColor>( "D-1", 10200,  OxyColors.ForestGreen),
            new Tuple<string, double, OxyColor>( "その他", 9200, OxyColors.Gray),
        };

        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.Diameter = 0.5;                       // 半径

            pieSeries.Stroke = OxyColors.WhiteSmoke;        // ボーダーの色
            pieSeries.StrokeThickness = 3;                  // ボーダーの幅
            
            pieSeries.StartAngle = -90;                     // データの開始角度

            // 円の外側に表示されるラベルは表示しない
            pieSeries.TickDistance = 0;
            pieSeries.TickLabelDistance = 0;
            pieSeries.TickRadialLength= 0;
            pieSeries.TickHorizontalLength = 0;
            pieSeries.OutsideLabelFormat = "";

            // データ設定
            foreach( Tuple<string, double, OxyColor> tuple in pieDataList )
            {
                PieSlice pieSlice = new PieSlice(tuple.Item1, tuple.Item2);
                pieSlice.Fill = tuple.Item3;
                pieSeries.Slices.Add(pieSlice);
            }

            plotModel.Series.Add(pieSeries);


            // 外側の円
            PieSeries subPieSeries = new PieSeries();

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

            subPieSeries.InnerDiameter = 0.5;                  // 内側の円の半径と一致させる

            subPieSeries.StartAngle = -90;                     // データの開始角度

            // 円の外側に表示されるラベルは表示しない
            subPieSeries.TickDistance = 0;
            subPieSeries.TickLabelDistance = 0;
            subPieSeries.TickRadialLength = 0;
            subPieSeries.TickHorizontalLength = 0;
            subPieSeries.OutsideLabelFormat = "";

            // データ設定
            foreach (Tuple<string, double, OxyColor> tuple in subPieDataList)
            {
                PieSlice pieSlice = new PieSlice(tuple.Item1, tuple.Item2);
                pieSlice.Fill = tuple.Item3;
                subPieSeries.Slices.Add(pieSlice);

            }

            plotModel.Series.Add(subPieSeries);

            return plotModel;
        }
    }
}

プロジェクトを実行すると↓のように二重に円グラフを表示できました。

まとめ

C# WPFアプリケーションにおいて、OxyPlot で二重の円グラフを描画する方法をお伝えしました。

この方法を応用すれば、三重、四重、、、の円グラフも描画可能です。

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

コメント

コメントする

目次