このトピックでは、 IGChartView™ のインスタンスを作成し、データを表示する方法を紹介します。
以下の表は、このトピックを理解するために必要な、前提条件となるトピックを示しています。
以下の表には、このトピックのコード例が示されています。
指定されたデータ ソースにより、 IGChartView のデータ視覚化が強化されています。このコード例によってできるのは:
データ ソースを生成する
データ ソースを IGChartView に割り当てる
表示された列系列チャートを示す
次のスクリーンショットでは、 IGChartView で結果のプレビューを描画する方法を示します。
この例のデータソースは、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);
}このトピックについては、以下のトピックも合わせてご参照ください。