Xuni for IOS のドキュメント
ゾーン

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

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

Zones in FlexChart

FlexChart でのゾーンの作成

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

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

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

  1. Project Navigator で、プロジェクト名を右クリックします。
  2. [新しいファイル]を選択します。新しいファイルのテンプレートを選択します。
  3. OS X の下で、[ソース]→[Cocoa クラス]を選択します。
  4. [次へ]をクリックして、追加したクラスに SurveyResult という名前を付けます。
  5. SurveyResult クラスに次のコードを追加します。

    import UIKit
    
    class SurveyResult: NSObject {
        var surveyNumber: Double
        var satisfaction: Double
        init(surveyNumber: Double, satisfaction: Double) {
            self.surveyNumber = surveyNumber
            self.satisfaction = satisfaction
        }
    }
    
    class ChartPoint: NSObject {
        var x: Double
        var y: Double
        init(x: Double, y: Double) {
            self.x = x
            self.y = y
        }
    }
    
    #import <Foundation/Foundation.h>
    
    @interface SurveyResult : NSObject
    
    @property NSNumber *surveyNumber;
    @property NSNumber *satisfaction;
    
    - (id)initWithSurveyNumber:(NSNumber*)surveyNumber satisfaction:(NSNumber*)satisfaction;
    
    @end
    
    @interface ChartPoint : NSObject
    
    @property NSNumber *x;
    @property NSNumber *y;
    
    - (id)initWithX:(NSNumber*)x y:(NSNumber*)y;
    @end
    
    
    #import "SurveyResult.h"
    
    @implementation SurveyResult
    - (id)initWithSurveyNumber:(NSNumber *)surveyNumber satisfaction:(NSNumber *)satisfaction{
        self = [super init];
        if(self){
            _surveyNumber = surveyNumber;
            _satisfaction = satisfaction;
        }
        return self;
    }
    @end
    
    @implementation ChartPoint
    
    - (id)initWithX:(NSNumber*)x y:(NSNumber*)y {
        self = [super init];
        if(self){
            _x = x;
            _y = y;
        }
        return self;
    }
    
    @end
    

手順 2:FlexChart コントロールを初期化してデータに連結し、ゾーンを作成します

FlexChart コントロールを初期化してゾーンを作成するには、Project Navigator から ViewController.swift または ViewController.m ファイルを開き、その内容を次のコードに置き換えます。

import UIKit
import XuniFlexChartKit

class ViewController: UIViewController {
    var chart = FlexChart()
    var titleLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // ビューを読み込んだ後の追加セットアップを行います(通常は nib から)。
        chart.chartType = XuniChartType.scatter
        chart.bindingX = "surveyNumber"
        chart.axisX.axisLineVisible = false
        chart.axisX.majorGridVisible = false
        chart.axisX.title = "Survey Number"
        chart.axisY.title = "Satisfaction Score"
        chart.axisY.max = 10 as NSNumber
        
        var scores: [Double] = [ 8, 9, 9, 10, 3, 10, 6, 10, 7, 9 ]
        var results = NSMutableArray()
        chart.itemsSource = results;
        var zone1 = NSMutableArray()
        var zone2 = NSMutableArray()
        var zone3 = NSMutableArray()
        var threshold1 = NSMutableArray()
        var threshold2 = NSMutableArray()
        
        //ゾーンとしきい値のポイントを設定します
        for i in(0..<10)
        {
            results.add(SurveyResult(surveyNumber: Double(i), satisfaction: scores[i]))
           
            zone1.add(ChartPoint(x: Double(i), y: 10))
            zone2.add(ChartPoint(x: Double(i), y: 9))
            zone3.add(ChartPoint(x: Double(i), y: 7))
    
            threshold1.add(ChartPoint(x: Double(i), y: 9))
            threshold2.add(ChartPoint(x: Double(i), y: 7))
        }
        
        //推奨者のゾーン 1
        var seriesZone1 = XuniSeries(for: chart, binding: "y", name: "Promoter")
        seriesZone1?.itemsSource = zone1
        seriesZone1?.bindingX = "x"
        seriesZone1?.chartType = XuniChartType.area
        seriesZone1?.color = UIColor.cyan
        chart.series.add(seriesZone1)
        
        //中立者のゾーン 2
        var seriesZone2 = XuniSeries(for: chart, binding: "y", name: "Passive")
        seriesZone2?.itemsSource = zone2
        seriesZone2?.bindingX = "x"
        seriesZone2?.chartType = XuniChartType.area
        seriesZone2?.color = UIColor.blue
        chart.series.add(seriesZone2)
        
        //批判者のゾーン 3
        var seriesZone3 = XuniSeries(for: chart, binding: "y", name: "Detractor")
        seriesZone3?.itemsSource = zone3
        seriesZone3?.bindingX = "x"
        seriesZone3?.chartType = XuniChartType.area
        seriesZone3?.color = UIColor(red: 0.9333, green:0.500, blue: 0.9500, alpha: 1.0)
        chart.series.add(seriesZone3)
        
        //推奨者のしきい値線
        var seriesThreshold1 = XuniSeries(for: chart, binding: "y", name: "Promoter Threshold") 
        seriesThreshold1?.itemsSource = threshold1
        seriesThreshold1?.bindingX = "x"
        seriesThreshold1?.chartType = XuniChartType.line
        seriesThreshold1?.color = UIColor.brown
        chart.series.add(seriesThreshold1)
        
        //中立者のしきい値線
        var seriesThreshold2 = XuniSeries(for: chart, binding: "y", name: "Passive Threshold")        
        seriesThreshold2?.itemsSource = threshold2
        seriesThreshold2?.bindingX = "x"
        seriesThreshold2?.chartType = XuniChartType.line
        seriesThreshold2?.color = UIColor.orange
        chart.series.add(seriesThreshold2)
        
        //顧客満足度結果を追加します
        var satisfactionSeries = XuniSeries(for: chart, binding: "satisfaction", name: "Satisfaction")
        satisfactionSeries?.itemsSource = results
        satisfactionSeries?.chartType = XuniChartType.scatter;
        satisfactionSeries?.color = UIColor.black
        chart.series.add(satisfactionSeries)
        
        titleLabel.text = "NPS Score " + String(getNPSScore(scores: scores))
        titleLabel.textAlignment = NSTextAlignment.center
        titleLabel.font =  UIFont.systemFont(ofSize: 24)
        
        self.view.addSubview(titleLabel)
        self.view.addSubview(chart)
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        titleLabel.frame = CGRect(x: 0, y: 30, width: self.view.bounds.size.width, height: 30)
        chart.frame = CGRect(x: 0, y: 60, width: (self.view.bounds.size.width - 20), height: (self.view.bounds.size.height - 70))
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // 再作成可能なリソースをすべて破棄します。
    }
    func getNPSScore(scores: Array<Double>) -> Double{
        var promoter: Double = 0
        
        var detractor : Double = 0;
        
        for score in scores
        {
            if (Int(score) >= 9)
            {
                promoter += 1
            }
            else if (Int(score) < 7)
                
            {
                detractor += 1
            }

        }
        
        let nps = (promoter - detractor) / Double(scores.count) * 100
        
        return nps
    }
}

#import "ViewController.h"
#import "SurveyResult.h"
#import <XuniFlexChartKit/XuniFlexChartKit.h>

@interface ViewController (){
    FlexChart *chart;
    UILabel *titleLabel;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // ビューを読み込んだ後の追加セットアップを行います(通常は nib から)。
    chart = [[FlexChart alloc] init];
    titleLabel = [[UILabel alloc] init];
    
    chart.chartType = XuniChartTypeScatter;
    chart.bindingX = @"surveyNumber";
    chart.axisX.axisLineVisible = false;
    chart.axisX.majorGridVisible = false;
    chart.axisX.title = @"Survey Number";
    chart.axisY.title = @"Satisfaction Score";
    chart.axisY.max = @10;
    
    NSMutableArray *scores = @[ @8, @9, @9, @10, @3, @10, @6, @10, @7, @9 ];
    NSMutableArray  *results = [[NSMutableArray alloc] init];
    chart.itemsSource = results;
    NSMutableArray *zone1 = [[NSMutableArray alloc] init];
    NSMutableArray *zone2 = [[NSMutableArray alloc] init];
    NSMutableArray *zone3 = [[NSMutableArray alloc] init];
    NSMutableArray *threshold1 = [[NSMutableArray alloc] init];
    NSMutableArray *threshold2 = [[NSMutableArray alloc] init];
    
    //ゾーンとしきい値のポイントを設定します
    
    for (int i = 0; i < 10; i++)
        
    {
        
        [results addObject: [[SurveyResult alloc]initWithSurveyNumber:@(i) satisfaction:[scores objectAtIndex:i]]];
        [zone1 addObject:[[ChartPoint alloc] initWithX:@(i) y:@10]];
        [zone2 addObject:[[ChartPoint alloc] initWithX:@(i) y:@9]];
        [zone3 addObject:[[ChartPoint alloc] initWithX:@(i) y:@7]];
        [threshold1 addObject:[[ChartPoint alloc] initWithX:@(i) y:@9]];;
        [threshold2 addObject:[[ChartPoint alloc] initWithX:@(i) y:@7]];;
        
    }
    
    // 推奨者のゾーン 1
    XuniSeries *seriesZone1 =  [[XuniSeries alloc] initForChart:chart binding:@"y" name:@"Promoter"];
    seriesZone1.itemsSource = zone1;
    seriesZone1.bindingX = @"x";
    seriesZone1.chartType = XuniChartTypeArea;
    seriesZone1.color = [UIColor cyanColor];
    [chart.series addObject:seriesZone1];
        
    // 中立者のゾーン 2
    XuniSeries *seriesZone2 =  [[XuniSeries alloc] initForChart:chart binding:@"y" name:@"Passive"];
    seriesZone2.itemsSource = zone2;
    seriesZone2.bindingX = @"x";
    seriesZone2.chartType = XuniChartTypeArea;
    seriesZone2.color = [UIColor blueColor];
    [chart.series addObject:seriesZone2];
    
    // 批判者のゾーン 3
    XuniSeries *seriesZone3 =  [[XuniSeries alloc] initForChart:chart binding:@"y" name:@"Detractor"];
    seriesZone3.itemsSource = zone3;
    seriesZone3.bindingX = @"x";
    seriesZone3.chartType = XuniChartTypeArea;
    seriesZone3.color = [UIColor colorWithRed:0.93 green:0.50 blue:0.95 alpha:1.0];
    [chart.series addObject:seriesZone3];
    
    // 推奨者のしきい値線
    XuniSeries *seriesThreshold1 =  [[XuniSeries alloc] initForChart:chart binding:@"y" name:@"Promoter Threshold"];
    seriesThreshold1.itemsSource = threshold1;
    seriesThreshold1.bindingX = @"x";
    seriesThreshold1.chartType = XuniChartTypeLine;
    seriesThreshold1.color = [UIColor brownColor];
    [chart.series addObject:seriesThreshold1];
    
    // 中立者のしきい値線
    XuniSeries *seriesThreshold2 =  [[XuniSeries alloc] initForChart:chart binding:@"y" name:@"Passive Threshold"];
    seriesThreshold2.itemsSource = threshold2;
    seriesThreshold2.bindingX = @"x";
    seriesThreshold2.chartType = XuniChartTypeLine;
    seriesThreshold2.color = [UIColor orangeColor];
    [chart.series addObject:seriesThreshold2];
        
    // 顧客満足度結果を追加します
    XuniSeries *satisfactionSeries =  [[XuniSeries alloc] initForChart:chart binding:@"satisfaction" name:@"Satisfaction"];
    satisfactionSeries.itemsSource = results;
    satisfactionSeries.chartType = XuniChartTypeScatter;
    satisfactionSeries.color = [UIColor blackColor];
    [chart.series addObject:satisfactionSeries];
    
    titleLabel.text = [@"NPS Score " stringByAppendingFormat:@"%@", [self getNPS:scores]];
    titleLabel.textAlignment = NSTextAlignmentCenter;
    titleLabel.font = [UIFont systemFontOfSize:24];
    [self.view addSubview:titleLabel];
    [self.view addSubview:chart];
}
-(void)viewDidLayoutSubviews{
    titleLabel.frame = CGRectMake(0, 30, self.view.bounds.size.width, 30);
    chart.frame = CGRectMake(10, 60, self.view.bounds.size.width -20, self.view.bounds.size.height - 70);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // 再作成可能なリソースをすべて破棄します。
}

- (NSNumber*)getNPS:(NSMutableArray*)scores{
    double promoter = 0;
    
    double detractor = 0;
    
    for(NSNumber *score in scores)
    
    {
        
        if ([score intValue]>= 9)
            
        {
            
            promoter++;
            
        }
        
        else if ([score intValue] < 7)
            
        {
            
            detractor++;
            
        }
        
    }
    
    NSNumber *nps = [[NSNumber alloc] initWithDouble:((promoter - detractor) / [scores count]) * 100];
    
    return nps;
}
@end

 

 


Copyright © GrapeCity inc. All rights reserved.