軸ラベルの書式設定

FlexChart の軸ラベルの書式設定機能を使用すると、軸ラベルの書式を標準の書式文字列よりも高度にカスタマイズできます。LabelLoading イベントによって、画像、アイコン、テキスト、記号などのカスタマイズした注釈を軸に表示できます。これにより、画面スペースの使用を最適化し、チャートデータを明確に可視化できます。

以下のセクションで、軸ラベルの書式設定を使用して FlexChart の X 軸と Y 軸をカスタマイズする方法を説明します。

Y 軸をカスタマイズしてラベルの数字を短縮形で表示

軸ラベルに桁数の多い数字を使用する場合、軸ラベルの書式設定を使用して長い数値表現を短縮表記できます。たとえば、以下の例では、1,000 を示す '000' を K で表しています。これにより、6 桁以上の数値ラベルを、占有する画面スペースを抑えてモバイル画面に簡単にプロットできます。

X 軸をカスタマイズして画像を表示

別の例として、6 か国の売上と経費のデータをグラフ化する場合を取り上げます。ここでは、国の名前の代わりに国旗を表示することで、グラフの視覚的効果を高めるとともに、意味が一目でわかるようにします。FlexChart の軸ラベルの書式設定を使用して、軸をカスタマイズできます。

下図の FlexChart の X 軸に表示されている国のアイコンは、Xcode プロジェクトの images.xcassets フォルダーに追加された .png 画像です。これらの国旗の画像は、Xuni の Samples フォルダーにあります。これら以外の画像やアイコンを使用してもかまいません。

次の図では、FlexChart コントロールの軸ラベルの書式設定を使用して、X 軸と Y 軸のラベルをカスタマイズしています。

手順 1: FlexChart のデータソースを作成する

プロジェクトナビゲータで、プロジェクト名を右クリックします。
［New File］を選択します。［Choose a template for your new file］ダイアログが表示されます。
［OS X］の下で、［Source］-［Cocoa Class］を選択します。
［Next］をクリックします。クラスに AxisLabelData という名前を付け、［subclass of］ドロップダウンで［NSObject］を選択します。

これで、AxisLabelData.h と AxisLabelData.m がアプリケーションに追加されます。その追加された AxisLabelData.h ファイルと AxisLabelData.m ファイルに以下のコードを追加します。

AxisLabelData.h
AxisLabelData.m

 
#import <Foundation/Foundation.h>
@interface AxisLabelData : NSObject

@property NSString *name;
@property NSNumber *sales;
@property NSNumber *expenses;
@property NSNumber *downloads;

- (id)initWithName:(NSString *)name sales:(NSNumber *)sales expenses:(NSNumber *)expenses downloads:(NSNumber *)downloads;

+ (NSMutableArray *)demoData;
@end

       
#import "AxisLabelData.h"

@implementation AxisLabelData
-(id)initWithName:(NSString *)name sales:(NSNumber *)sales expenses:(NSNumber *)expenses downloads:(NSNumber *)downloads {
    self = [super init];
    if(self){
        _name = name;
        _sales = sales;
        _expenses = expenses;
        _downloads = downloads;
    }
    return self;
}
+(NSNumber *)generateRandom:(NSInteger) max {
    return [NSNumber numberWithUnsignedInteger:(arc4random() % max)];
}

+(NSMutableArray *)demoData {
    AxisLabelData *US = [[AxisLabelData alloc] initWithName:@"US" sales:[AxisLabelData generateRandom : 10001] expenses:[AxisLabelData generateRandom : 5001] downloads:[AxisLabelData generateRandom : 20001]];
    AxisLabelData *Germany = [[AxisLabelData alloc] initWithName:@"Germany" sales:[AxisLabelData generateRandom : 10001] expenses:[AxisLabelData generateRandom : 5001] downloads:[AxisLabelData generateRandom : 20001]];
    AxisLabelData *UK = [[AxisLabelData alloc] initWithName:@"UK" sales:[AxisLabelData generateRandom : 10001] expenses:[AxisLabelData generateRandom : 5001] downloads:[AxisLabelData generateRandom : 20001]];
    AxisLabelData *Japan = [[AxisLabelData alloc] initWithName:@"Japan" sales:[AxisLabelData generateRandom : 10001] expenses:[AxisLabelData generateRandom : 5001] downloads:[AxisLabelData generateRandom : 20001]];
    AxisLabelData *Italy = [[AxisLabelData alloc] initWithName:@"Italy" sales:[AxisLabelData generateRandom : 10001] expenses:[AxisLabelData generateRandom : 5001] downloads:[AxisLabelData generateRandom : 20001]];
    AxisLabelData *Greece = [[AxisLabelData alloc] initWithName:@"Greece" sales:[AxisLabelData generateRandom : 10001] expenses:[AxisLabelData generateRandom : 5001] downloads:[AxisLabelData generateRandom : 20001]];
    return [[NSMutableArray alloc] initWithObjects:US, Germany, UK, Japan, Italy, Greece, nil];
}
@end

先頭に戻る

手順 2: FlexChart コントロールを初期化して軸をカスタマイズする

コードの編集

Objective-C

Objective-C	コードのコピー
#import "ViewController.h" #import "XuniFlexChartKit/XuniFlexChartKit.h" #import "AxisLabelData.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; NSNumber max = [[NSNumber alloc] initWithInt:10000]; FlexChart chart = [[FlexChart alloc] init]; chart.itemsSource = [AxisLabelData demoData]; chart.bindingX = @"name"; XuniSeries sales = [[XuniSeries alloc] initForChart:chart binding:@"sales, sales" name:@"売上"]; XuniSeries expenses = [[XuniSeries alloc] initForChart:chart binding:@"expenses, expenses" name:@"経費"]; [chart.series addObject:sales]; [chart.series addObject:expenses]; chart.axisX.title = @"Country"; chart.axisX.lineWidth = 2; chart.axisY.max = max; chart.legend.orientation = XuniChartLegendOrientationAuto; chart.legend.position = XuniChartLegendPositionAuto; IXuniEventHandler axisXLabelLoadingHandler = ^(NSObject sender, XuniEventArgs args) { XuniLabelLoadingEventArgs labelArgs = (XuniLabelLoadingEventArgs)args; labelArgs.label = nil; NSNumber countryNum = [NSNumber numberWithDouble:labelArgs.value]; UIImage image = [UIImage imageNamed:[countryNum stringValue]]; CGRect rect = CGRectMake(labelArgs.region.left, labelArgs.region.top, labelArgs.region.width, labelArgs.region.height); [image drawInRect:rect]; }; [chart.axisX.labelLoading addHandler:axisXLabelLoadingHandler forObject:self]; IXuniEventHandler axisYLabelLoadingHandler = ^(NSObject sender, XuniEventArgs args) { XuniLabelLoadingEventArgs labelArgs = (XuniLabelLoadingEventArgs)args; labelArgs.label = [NSString stringWithFormat:@"$%dK", (int)(labelArgs.value / 1000)]; }; [chart.axisY.labelLoading addHandler:axisYLabelLoadingHandler forObject:self]; chart.tag = 1; [self.view addSubview:chart]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } -(void)viewDidLayoutSubviews{ [super viewDidLayoutSubviews]; FlexChart chart = (FlexChart)[self.view viewWithTag:1]; chart.frame = CGRectMake(0, 55, self.view.bounds.size.width, self.view.bounds.size.height - 55); [chart setNeedsDisplay]; } @end

Objective-C

コードのコピー

#import "ViewController.h"
#import "XuniFlexChartKit/XuniFlexChartKit.h"
#import "AxisLabelData.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSNumber *max = [[NSNumber alloc] initWithInt:10000];
    FlexChart *chart = [[FlexChart alloc] init];
    chart.itemsSource = [AxisLabelData demoData];
    chart.bindingX = @"name";
    XuniSeries *sales = [[XuniSeries alloc] initForChart:chart binding:@"sales, sales" name:@"売上"];
    XuniSeries *expenses = [[XuniSeries alloc] initForChart:chart binding:@"expenses, expenses" name:@"経費"];
    
    [chart.series addObject:sales];
    [chart.series addObject:expenses];
    
    
    chart.axisX.title = @"Country";
    chart.axisX.lineWidth = 2;
    chart.axisY.max = max;
    chart.legend.orientation = XuniChartLegendOrientationAuto;
    chart.legend.position = XuniChartLegendPositionAuto;
    
  IXuniEventHandler axisXLabelLoadingHandler = ^(NSObject *sender, XuniEventArgs *args) {
    XuniLabelLoadingEventArgs *labelArgs = (XuniLabelLoadingEventArgs*)args;
      labelArgs.label = nil;
        
        NSNumber *countryNum = [NSNumber numberWithDouble:labelArgs.value];
        UIImage *image = [UIImage imageNamed:[countryNum stringValue]];
        CGRect rect = CGRectMake(labelArgs.region.left, labelArgs.region.top, labelArgs.region.width, labelArgs.region.height);
        [image drawInRect:rect];
    };
   [chart.axisX.labelLoading addHandler:axisXLabelLoadingHandler forObject:self];
    
    IXuniEventHandler axisYLabelLoadingHandler = ^(NSObject *sender, XuniEventArgs *args) {
        XuniLabelLoadingEventArgs *labelArgs = (XuniLabelLoadingEventArgs*)args;
        
        labelArgs.label = [NSString stringWithFormat:@"$%dK", (int)(labelArgs.value / 1000)];
        
    };
    [chart.axisY.labelLoading addHandler:axisYLabelLoadingHandler forObject:self];
    
    chart.tag = 1;
    [self.view addSubview:chart];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

-(void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];
    FlexChart *chart = (FlexChart*)[self.view viewWithTag:1];
    chart.frame = CGRectMake(0, 55, self.view.bounds.size.width, self.view.bounds.size.height - 55);
    [chart setNeedsDisplay];
}

@end