Xamarin.Forms のドキュメント
ゾーン
コントロール > FlexChart > 機能 > ゾーン

FlexChart を使用すると、色分けされたゾーンと呼ばれる領域を作成してチャートに適用できます。この色分けされたゾーンにより、チャートにプロットされたデータポイントがいくつかの領域に分類され、ユーザーは容易にデータを読み取って理解できるようになります。ユーザーは、特定のデータポイントが属するカテゴリを簡単に特定できます。

ゾーンの作成がどのように役立つかを説明するために、顧客が特定の製品の推奨者か、中立者か、批判者かの識別を目的とした顧客満足度調査を考えます。調査で記録された回答から NPS（ネットプロモータースコア）を計算することで、顧客を推奨者、中立者、批判者に分類できます。このシナリオは FlexChart で実現できます。具体的には、顧客の回答をデータポイントとしてチャートにプロットし、プロットされたデータポイントを面グラフで色分けされたゾーンに分類します。ゾーンは線タイプのデータ系列で区切られます。

Zones in FlexChart

FlexChart でのゾーンの作成

FlexChart では、ChartSeries クラスに基づくデータ系列としてゾーンを作成できます。各ゾーンは面グラフとして作成できます。それには、ChartType プロパティを Area に設定し、それぞれを固有の色で強調表示します。各ゾーンを区切るために、線タイプのデータ系列をしきい値としてチャートに作成できます。

FlexChart にゾーンを作成するには、次の手順を実行します。

手順 1：調査結果データを記録するクラスを作成します

  1. ソリューションエクスプローラーで、プロジェクト名（portable app）を右クリックします。
  2. ［追加］→［新しい項目...］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
  3. ダイアログから［クラス］を選択し、SurveyResult という名前を付けます。
  4. ［追加］をクリックして、クラスをプロジェクトに追加します。
  5. SurveyResult クラスに次のコードを追加します。

    C#
    コードのコピー 
     public class SurveyResult
    {
        public int surveyNumber { get; set; }
        public int satisfaction { get; set; }

        public SurveyResult(int surveyNumber, int satisfaction)
        {
            this.surveyNumber = surveyNumber;
            this.satisfaction = satisfaction;
        }
    }

手順 2：FlexChart コントロールを初期化します

  1. ソリューションエクスプローラーでプロジェクトを右クリックし、［追加］→［新しい項目...］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
  2. インストール済みテンプレートから［Content Page］を選択し、SurveyZones という名前を付けます。
  3. ［追加］をクリックして、XAML ページをプロジェクトに追加します。
  4. SurveyZones.xaml ページに次の XAML コードを追加して FlexChart コントロールを初期化します。

    XAML
    コードのコピー 
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart"
             x:Class="QuickstartChart.SurveyZones">
  <StackLayout>
    <Label x:Name="lbl" HorizontalOptions="Center" Font="Large"/>
    <Grid VerticalOptions="FillAndExpand" >
      <c1:FlexChart x:Name="flex" BindingX="surveyNumber" VerticalOptions="FillAndExpand" 
                    ChartType="Scatter" Grid.Row="0">
        <c1:FlexChart.AxisX>
          <c1:ChartAxis AxisLine="false" MajorGrid="false" Title="調査番号" />
        </c1:FlexChart.AxisX>
        <c1:FlexChart.AxisY>
          <c1:ChartAxis Title="満足度スコア" Max="10"/>
        </c1:FlexChart.AxisY>
      </c1:FlexChart>
    </Grid>
  </StackLayout>
</ContentPage>

手順 3：データを連結し、ゾーンを作成します

  1. SurveyZones.xaml ノードを展開し、SurveyZones.xaml ファイルを開きます。
  2. 次の import 文を追加します。

    C#
    コードのコピー 
    using Xamarin.Forms;
using C1.Xamarin.Forms.Chart;
using System.Collections.ObjectModel;

  3. 次のコードを SurveyZones() クラスコンストラクタに追加して、チャートにゾーンを作成し、データラベルに NPS スコアを表示します。

    C#
    コードのコピー 
    public partial class SurveyZones : ContentPage
    {
        public SurveyZones()
        {
            InitializeComponent();

            //顧客調査結果
            int[] scores = { 8, 9, 9, 10, 3, 10, 6, 10, 7, 9 };

            ObservableCollection<SurveyResult> results = new ObservableCollection<SurveyResult>();
            flex.ItemsSource = results;

            Point[] zone1 = new Point[10];
            Point[] zone2 = new Point[10];
            Point[] zone3 = new Point[10]; ;

            Point[] threshold1 = new Point[10];
            Point[] threshold2 = new Point[10];

            //ゾーンとしきい値のポイントを設定します
            for (int i = 0; i < 10; i++)
            {
                results.Add(new SurveyResult(i, scores[i]));
                zone1[i] = new Point(i, 10);
                zone2[i] = new Point(i, 9);
                zone3[i] = new Point(i, 7);
                threshold1[i] = new Point(i, 9);
                threshold2[i] = new Point(i, 7);
            }

            //推奨者のゾーン 1
            var seriesZone1 = new ChartSeries();
            seriesZone1.ItemsSource = zone1;
            seriesZone1.Binding = "Y";
            seriesZone1.BindingX = "X";
            seriesZone1.ChartType = C1.Xamarin.Forms.Chart.ChartType.Area;
            seriesZone1.SeriesName = "推奨者";

            //中立者のゾーン 2
            var seriesZone2 = new ChartSeries();
            seriesZone2.ItemsSource = zone2;
            seriesZone2.Binding = "Y";
            seriesZone2.BindingX = "X";
            seriesZone2.ChartType = ChartType.Area;
            seriesZone2.SeriesName = "中立者";

            //批判者のゾーン 3
            var seriesZone3 = new ChartSeries();
            seriesZone3.ItemsSource = zone3;
            seriesZone3.Binding = "Y";
            seriesZone3.BindingX = "X";
            seriesZone3.ChartType = ChartType.Area;
            seriesZone3.SeriesName = "批判者";

            flex.Series.Add(seriesZone1);
            flex.Series.Add(seriesZone2);
            flex.Series.Add(seriesZone3);

            //推奨者のしきい値線
            var seriesThreshold1 = new ChartSeries();
            seriesThreshold1.ItemsSource = threshold1;
            seriesThreshold1.Binding = "Y";
            seriesThreshold1.BindingX = "X";
            seriesThreshold1.SeriesName = "推奨者のしきい値";
            seriesThreshold1.ChartType = ChartType.Line;

            //中立者のしきい値線
            var seriesThreshold2 = new ChartSeries();
            seriesThreshold2.ItemsSource = threshold2;
            seriesThreshold2.Binding = "Y";
            seriesThreshold2.BindingX = "X";
            seriesThreshold2.SeriesName = "中立者のしきい値";

            flex.Series.Add(seriesThreshold1);
            flex.Series.Add(seriesThreshold2);

            //顧客満足度結果を追加します
            var satisfactionSeries = new ChartSeries();
            satisfactionSeries.SeriesName = "Satisfaction";
            satisfactionSeries.Binding = "satisfaction";


            flex.Series.Add(satisfactionSeries);
            lbl.Text = "NPS スコア " + GetNPS(scores).ToString();
        }

             public double GetNPS(int[] scores)
        {
            double promoter = 0;
            double detractor = 0;
            foreach (int score in scores)
            {
                if (score >= 9)
                {
                    promoter++;
                }
                else if (score < 7)
                {
                    detractor++;
                }
            }
            double nps = ((promoter - detractor) / scores.Length) * 100;
            return nps;
        }
    }

 

 

Copyright © GrapeCity, Inc. All rights reserved.