Xuni コントロール > FlexChart > 機能 > ゾーン |
FlexChart を使用すると、色分けされたゾーンと呼ばれる領域を作成してチャートに適用できます。この色分けされたゾーンにより、チャートにプロットされたデータポイントがいくつかの領域に分類され、ユーザーは容易にデータを読み取って理解できるようになります。ユーザーは、特定のデータポイントが属するカテゴリを簡単に特定できます。
ゾーンの作成がどのように役立つかを説明するために、顧客が特定の製品の推奨者か、中立者か、批判者かの識別を目的とした顧客満足度調査を考えます。調査で記録された回答から NPS(ネットプロモータースコア)を計算することで、顧客を推奨者、中立者、批判者に分類できます。このシナリオは FlexChart で実現できます。具体的には、顧客の回答をデータポイントとしてチャートにプロットし、プロットされたデータポイントを面グラフで色分けされたゾーンに分類します。ゾーンは線タイプのデータ系列で区切られます。
FlexChart では、XuniSeries クラスに基づくデータ系列としてゾーンを作成できます。各ゾーンは面グラフとして作成できます。それには、chartType プロパティを Area に設定し、それぞれを固有の色で強調表示します。各ゾーンを区切るために、線タイプのデータ系列をしきい値としてチャートに作成できます。
FlexChart にゾーンを作成するには、次の手順を実行します。
手順 1:調査結果データを記録するクラスを作成します
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