バージョン

IGChartView を UIView に追加

トピックの概要

目的

このトピックでは、 IGChartView™ のインスタンスを作成し、データを表示する方法を紹介します。

前提条件

以下の表は、このトピックを理解するために必要な、前提条件となるトピックを示しています。

トピック 目的

このトピックは、チャート フレームワーク ファイルをプロジェクトに追加する方法を説明します。

本トピックの内容

このトピックは以下のセクションから構成されます。

コード例

コード例の概要

以下の表には、このトピックのコード例が示されています。

説明

IGChartView の使用の開始には、インスタンスを作成し、ビューに追加します。この例のコードでは、列系列チャートのインスタンスを作成するため、 UIViewController での viewDidLoad メソッドをオーバーライドします。

IGChartView でのチャート表示 – コード例

説明

指定されたデータ ソースにより、 IGChartView のデータ視覚化が強化されています。このコード例によってできるのは:

  • データ ソースを生成する

  • データ ソースを IGChartView に割り当てる

  • 表示された列系列チャートを示す

プレビュー

次のスクリーンショットでは、 IGChartView で結果のプレビューを描画する方法を示します。

Getting Started with IGChartView 1.png

コード

この例のデータソースは、25 の乱数を含む NSMutableArray を使用します。データ配列の処理に使用する IGCategorySeriesDataSourceHelper は、 IGChartView の作成を簡素化します。

Objective-C の場合:

 NSMutableArray *data = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++) {
        double value = arc4random() % 100;
        [data addObject:[[NSNumber alloc] initWithDouble:value]];
    }
    IGCategorySeriesDataSourceHelper *source = [[IGCategorySeriesDataSourceHelper alloc] init];
    source.values = data;

C# の場合:

 List<NSObject> data = new List<NSObject>();
   Random r = new Random();
   for(int i = 0;i <25; i++)
   {
       double val = r.Next() % 100;
       data.Add(new NSNumber(val));
   }
 IGCategoryDateSeriesDataSourceHelper source = new IGCategoryDateSeriesDataSourceHelper();
   source.Values = data.ToArray();

生成されたデータをデータ ソース ヘルパーに割り当てると、 IGChartView のインスタンス化が可能になります。

Objective-C の場合:

 IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    [infraChart setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];

C# の場合:

 IGChartView chart = new IGChartView(this.View.Frame);
   chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;

軸は、一般的に数値軸あるいはカテゴリ軸として分類されます。カテゴリ軸はデータ ポイントを説明する文字列のラベルを表示します。数値軸は数字を表示します。このコード例では、X軸が文字列ラベルを表し、Y軸が数字を表しています。

Objective-C の場合:

 IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];

C# の場合:

 IGCategoryXAxis xAxis = new IGCategoryXAxis("xAxis");
   IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");
   chart.AddAxis(xAxis);
   chart.AddAxis(yAxis);

柱状チャート シリーズ タイプを使用することで、シリーズの X軸およびY軸を参照し、配列を生成するようにデータソースを設定し、 IGChartView に列シリーズを追加することができます。

Objective-C の場合:

 IGColumnSeries *columnSeries = [[IGColumnSeries alloc] initWithKey:@"columnSeries"];
    columnSeries.xAxis = xAxis;
    columnSeries.yAxis = yAxis;
    columnSeries.dataSource = source;
    [infraChart addSeries:columnSeries];

C# の場合:

 IGColumnSeries columnSeries = new IGColumnSeries("columnSeries");
   columnSeries.XAxis = xAxis;
   columnSeries.YAxis = yAxis;
   columnSeries.DataSource = source;
   chart.AddSeries(columnSeries);

IGChartView は設定され、サブビューとして UIViewController に追加できる状態になっています。

Objective-C の場合:

 [self.view addSubview:infraChart];

C# の場合:

 this.View.AddSubview(chart);

コード: 完全リスト

Objective-C の場合:

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSMutableArray *data = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++) {
        double value = arc4random() % 100;
        [data addObject:[[NSNumber alloc] initWithDouble:value]];
    }
    IGCategorySeriesDataSourceHelper *source = [[IGCategorySeriesDataSourceHelper alloc] init];
    source.values = data;
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    [infraChart setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
    IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    IGColumnSeries *columnSeries = [[IGColumnSeries alloc] initWithKey:@"columnSeries"];
    columnSeries.xAxis = xAxis;
    columnSeries.yAxis = yAxis;
    columnSeries.dataSource = source;
    [infraChart addSeries:columnSeries];
    [self.view addSubview:infraChart];
}

C# の場合:

public override void ViewDidLoad ()
{
   base.ViewDidLoad ();
 List<NSObject> data = new List<NSObject>();
   Random r = new Random();
   for(int i = 0;i <25; i++)
   {
      double val = r.Next() % 100;
      data.Add(new NSNumber(val));
   }
 IGCategoryDateSeriesDataSourceHelper source = new IGCategoryDateSeriesDataSourceHelper();
   source.Values = data.ToArray();
 IGChartView chart = new IGChartView(this.View.Frame);
   chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
 IGCategoryXAxis xAxis = new IGCategoryXAxis("xAxis");
   IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");
   chart.AddAxis(xAxis);
   chart.AddAxis(yAxis);
 IGColumnSeries columnSeries = new IGColumnSeries("columnSeries");
   columnSeries.XAxis = xAxis;
   columnSeries.YAxis = yAxis;
   columnSeries.DataSource = source;
   chart.AddSeries(columnSeries);
 this.View.AddSubview(chart);
}

関連コンテンツ

トピック

このトピックについては、以下のトピックも合わせてご参照ください。

トピック 目的

このセクションは IGChartView の主要機能について説明します。

このトピックは、チャート フレームワーク ファイルをプロジェクトに追加する方法を説明します。