ラインマーカー

FlexChart のLineMarker ラベルの付いた水平線または垂直線をプロット上にドラッグすることによって、チャートの特定の位置の正確なデータ値を表示します。これは、大量のデータを折れ線グラフまたは面グラフで表している場合や、複数の系列のデータを 1 つのラベルに表示したい場合に便利です。Drag や Move などの組み込みのインタラクションにより、ラインマーカーをドラッグしてチャート上のデータポイントをより正確に選択できます。

ラインマーカーの IsVisible プロパティを設定することで、チャートにラインマーカーを表示するかどうかを切り替えることができます。

以下の図は FlexChart にラインマーカーを設定して表示しています。

FlexChart ラインマーカー

以下のコード例は、ラインマーカーを表示する方法を、Objective-C と C#で示します。この例では、「クイックスタート」のセクションで追加したデータソースを使用しています。

Obj-C	コードのコピー
#import <UIKit/UIKit.h> #import <XuniFlexChartKit/XuniFlexChartKit.h> @interface ViewController : UIViewController @end @interface MyMarkerView : XuniChartMarkerBaseView @property (nonatomic) XuniChartLineMarker lineMarker; @property (nonatomic) UILabel content; - (id)initWithLineMarker:(XuniChartLineMarker )lineMarker; @end @interface MyChartMarkerRender : NSObject<IXuniChartMarkerRender> - (id)initWithView:(XuniChartMarkerBaseView )view; @end

Obj-C

コードのコピー

#import <UIKit/UIKit.h>
#import <XuniFlexChartKit/XuniFlexChartKit.h>

@interface ViewController : UIViewController
@end

@interface MyMarkerView : XuniChartMarkerBaseView

@property (nonatomic) XuniChartLineMarker *lineMarker;
@property (nonatomic) UILabel *content;

- (id)initWithLineMarker:(XuniChartLineMarker *)lineMarker;

@end

@interface MyChartMarkerRender : NSObject<IXuniChartMarkerRender>

- (id)initWithView:(XuniChartMarkerBaseView *)view;

@end

Obj-C	コードのコピー
import "ViewController.h" #import "FlexChartDataSource.h" #import "XuniFlexChartKit/XuniFlexChartKit.h" @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self setTitle:@"Line Marker"]; FlexChart chart = [[FlexChart alloc] init]; chart.itemsSource = [FlexChartDataSource demoData]; chart.bindingX = @"name"; XuniSeries sales = [[XuniSeries alloc] initForChart:chart binding:@"Sales, sales" name:@"Sales"]; XuniSeries expenses = [[XuniSeries alloc] initForChart:chart binding:@"Expenses, expenses" name:@"Expenses"]; XuniSeries downloads = [[XuniSeries alloc] initForChart:chart binding:@"Downloads, downloads" name:@"Downloads"]; [chart.series addObject:sales]; [chart.series addObject:expenses]; [chart.series addObject:downloads]; chart.chartType = XuniChartTypeLine; chart.legend.orientation = XuniChartLegendOrientationHorizontal; chart.legend.position = XuniChartLegendPositionBottom; // FlexChart のラインマーカー（LineMarker）を設定します MyMarkerView view = [[MyMarkerView alloc] initWithLineMarker:chart.lineMarker]; view.markerRender = [[MyChartMarkerRender alloc] initWithView:view]; chart.lineMarker.content = view; chart.lineMarker.isVisible = YES; chart.lineMarker.alignment = XuniChartMarkerAlignmentBottomRight; chart.lineMarker.lines = XuniChartMarkerLinesVertical; chart.lineMarker.interaction= XuniChartMarkerInteractionMove; chart.lineMarker.dragContent = YES; chart.lineMarker.seriesIndex = -1; chart.lineMarker.verticalLineColor = [UIColor grayColor]; chart.lineMarker.verticalPosition = 0; [chart addSubview:view]; chart.tag = 1; [self.view addSubview:chart]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; } - (void)viewDidLayoutSubviews{ [super viewDidLayoutSubviews]; FlexChart chart = (FlexChart)[self.view viewWithTag:1]; chart.frame = CGRectMake( 20, 20, self.view.bounds.size.width, self.view.bounds.size.height); [chart setNeedsDisplay]; } @end // MyMarkerView クラス：ラインマーカーを描画します @implementation MyMarkerView - (id)initWithLineMarker:(XuniChartLineMarker )lineMarker { self = [super initWithLineMarker:lineMarker]; if (self) { _lineMarker = lineMarker; self.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1]; self.frame = CGRectMake(0, 0, 110, 60); _content = [[UILabel alloc] init]; _content.frame = CGRectMake(5, 5, 100, 50); _content.backgroundColor = [UIColor clearColor]; _content.font = [UIFont systemFontOfSize:10.0]; [self addSubview:_content]; } return self; } @end // MyChartMarkerRender クラス：表示するデータ内容を設定します @implementation MyChartMarkerRender { XuniChartMarkerBaseView _view; } - (id)initWithView:(XuniChartMarkerBaseView )view { _view = view; return self; } - (void)renderMarker { if (_view != nil ) { MyMarkerView view = (MyMarkerView )_view; NSArray data = view.lineMarker.dataPoints; if (data != nil && data.count > 0) { NSString str = @""; XuniDataPoint *point = data[0]; str = [str stringByAppendingFormat:@"%d \n", (int)point.dataX]; for (int i = 0; i < data.count - 1; i++) { point = data[i]; str = [str stringByAppendingFormat:@"%@ : %.0f \n", point.seriesName, point.dataY]; } point = data[data.count - 1]; str = [str stringByAppendingFormat:@"%@ : %.0f", point.seriesName, point.dataY]; view.content.text = str; view.content.numberOfLines = 4; } } } @end

Obj-C

コードのコピー

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

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setTitle:@"Line Marker"];
    
    FlexChart *chart = [[FlexChart alloc] init];
    chart.itemsSource = [FlexChartDataSource demoData];
    chart.bindingX = @"name";
    
    XuniSeries *sales = [[XuniSeries alloc] initForChart:chart binding:@"Sales, sales" name:@"Sales"];
    XuniSeries *expenses = [[XuniSeries alloc] initForChart:chart binding:@"Expenses, expenses" name:@"Expenses"];
    XuniSeries *downloads = [[XuniSeries alloc] initForChart:chart binding:@"Downloads, downloads" name:@"Downloads"];
    
    [chart.series addObject:sales];
    [chart.series addObject:expenses];
    [chart.series addObject:downloads];
    
    chart.chartType = XuniChartTypeLine;
    chart.legend.orientation = XuniChartLegendOrientationHorizontal;
    chart.legend.position = XuniChartLegendPositionBottom;
    
    // FlexChart のラインマーカー（LineMarker）を設定します
    MyMarkerView *view = [[MyMarkerView alloc] initWithLineMarker:chart.lineMarker];
    view.markerRender = [[MyChartMarkerRender alloc] initWithView:view];
    chart.lineMarker.content = view;
    chart.lineMarker.isVisible = YES;
    chart.lineMarker.alignment = XuniChartMarkerAlignmentBottomRight;
    chart.lineMarker.lines = XuniChartMarkerLinesVertical;
    chart.lineMarker.interaction= XuniChartMarkerInteractionMove;
    chart.lineMarker.dragContent = YES;
    chart.lineMarker.seriesIndex = -1;
    chart.lineMarker.verticalLineColor = [UIColor grayColor];
    chart.lineMarker.verticalPosition = 0;
    [chart addSubview:view];
    
    chart.tag = 1;
    [self.view addSubview:chart];
}

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

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
}

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

@end

// MyMarkerView クラス ：ラインマーカーを描画します
@implementation MyMarkerView

- (id)initWithLineMarker:(XuniChartLineMarker *)lineMarker {
    self = [super initWithLineMarker:lineMarker];
    if (self) {
        _lineMarker = lineMarker;
        
        self.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1];
        self.frame = CGRectMake(0, 0, 110, 60);
        
        _content = [[UILabel alloc] init];
        _content.frame = CGRectMake(5, 5, 100, 50);
        _content.backgroundColor = [UIColor clearColor];
        _content.font = [UIFont systemFontOfSize:10.0];
        [self addSubview:_content];
    }
    
    return self;
}
@end

// MyChartMarkerRender クラス ：表示するデータ内容を設定します
@implementation MyChartMarkerRender {
    XuniChartMarkerBaseView *_view;
}

- (id)initWithView:(XuniChartMarkerBaseView *)view {
    _view = view;
    return self;
}
- (void)renderMarker {
    if (_view != nil ) {
        MyMarkerView *view = (MyMarkerView *)_view;
        NSArray *data = view.lineMarker.dataPoints;
        
        if (data != nil && data.count > 0) {
            NSString *str = @"";
            XuniDataPoint *point = data[0];
            str = [str stringByAppendingFormat:@"%d \n", (int)point.dataX];
            
            for (int i = 0; i < data.count - 1; i++) {
                point = data[i];
                str = [str stringByAppendingFormat:@"%@ : %.0f \n", point.seriesName, point.dataY];
            }
            point = data[data.count - 1];
            str = [str stringByAppendingFormat:@"%@ : %.0f", point.seriesName, point.dataY];
            
            view.content.text = str;
            view.content.numberOfLines = 4;
        }
    }
}
@end