このセクションでは、iOS アプリに FlexChart コントロールを追加し、そこにデータを追加する方法について説明します。Objective-C で Xuni コントロールを追加する方法については、「Objective-C による Xuni コントロールの追加」を参照してください。
このトピックは 3 つの手順で構成されます。
次の図は、上記の手順を実行した後の FlexChart を示しています。
手順 1：FlexChart のデータソースの作成
- Project Navigator で、プロジェクト名を右クリックします。
- 新しいファイルを選択します。［新しいファイルのテンプレートを選択］ダイアログが表示されます。
- OS X の下で、［ソース］→［Cocoa クラス］を選択します。
- ［次へ］をクリックします。クラスに「FlexChartDataSource」と名前を付け、subclass of ドロップダウンで NSObject を選択します。
これで、FlexChartDataSource.h と FlexChartDataSource.m がアプリケーションに追加されます。追加した FlexChartDataSource.h および FlexChartDataSource.m ファイルに、次のコードを追加します。
import UIKit
class FlexChartDataSource: NSObject {
var month: String
var sales: Double
var expenses: Double
var downloads: Double
init(month: String, sales: Double, expenses: Double, downloads: Double) {
self.month = month
self.sales = sales
self.expenses = expenses
self.downloads = downloads
}
class func demoFlexChartDataSource() -> NSMutableArray {
return [
FlexChartDataSource(month: "1 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "2 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "3 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "4 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "5 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "6 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "7 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "8 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "9 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "10 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "11 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001)),
FlexChartDataSource(month: "12 月", sales: Double(arc4random()%10001), expenses: Double(arc4random()%5001), downloads: Double(arc4random()%20001))
]
}
}
#import <Foundation/Foundation.h>
@interface FlexChartDataSource : NSObject
@property NSString *monthsName;
@property double Sales;
@property double Downloads;
@property double Expenses;
-(id)initWithName:(NSString *)name sales:(double)s downloads:(double)d expenses:(double)e;
+(NSMutableArray *) demoData;
@end
#import "FlexChartdataSource.h"
@implementation FlexChartDataSource
-(id)initWithName:(NSString *)name sales:(double)s downloads:(double)d expenses:(double)e
{
self=[super init];
if(self)
{
_monthsName = name;
_Sales = s;
_Downloads = d;
_Expenses = e;
}
return self;
}
+(NSMutableArray *)demoData
{
FlexChartDataSource *jan = [[FlexChartDataSource alloc] initWithName:@"1 月" sales:5000 downloads:6000 expenses:15000];
FlexChartDataSource *feb = [[FlexChartDataSource alloc] initWithName:@"2 月" sales:8500 downloads:7500 expenses:18000];
FlexChartDataSource *mar = [[FlexChartDataSource alloc] initWithName:@"3 月" sales:7000 downloads:12000 expenses:15500];
FlexChartDataSource *apr = [[FlexChartDataSource alloc] initWithName:@"4 月" sales:6500 downloads:5800 expenses:18500];
FlexChartDataSource *may = [[FlexChartDataSource alloc] initWithName:@"5 月" sales:12000 downloads:11000 expenses:11000];
FlexChartDataSource *jun = [[FlexChartDataSource alloc] initWithName:@"6 月" sales:14800 downloads:7000 expenses:16000];
FlexChartDataSource *jul = [[FlexChartDataSource alloc] initWithName:@"7 月" sales:18500 downloads:16000 expenses:8000];
FlexChartDataSource *aug = [[FlexChartDataSource alloc] initWithName:@"8 月" sales:7500 downloads:17500 expenses:7500];
FlexChartDataSource *sep = [[FlexChartDataSource alloc] initWithName:@"9 月" sales:6500 downloads:19500 expenses:6500];
FlexChartDataSource *oct = [[FlexChartDataSource alloc] initWithName:@"10 月" sales:13000 downloads:13250 expenses:6000];
FlexChartDataSource *nov = [[FlexChartDataSource alloc] initWithName:@"11 月" sales:20000 downloads:13800 expenses:13500];
FlexChartDataSource *dec = [[FlexChartDataSource alloc] initWithName:@"12 月" sales:9000 downloads:19000 expenses:5000];
return [[NSMutableArray alloc] initWithObjects:jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec, nil];
}
@end
using System;
using System.Collections.Generic;
namespace Xuni_QuickStart
{
public class FlexChartDataSource
{
private List<Month> appData;
public List<Month> Data
{
get { return appData; }
}
public FlexChartDataSource()
{
// appData
appData = new List<Month>();
var monthNames = "1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月".Split(',');
var salesData = new[] { 5000, 8500, 7000, 6500, 12000, 14800, 18500, 7500, 6500, 13000, 20000, 9000 };
var downloadsData = new[] { 6000, 7500, 12000, 5800, 11000, 7000, 16000, 17500, 19500, 13250, 13800, 19000 };
var expensesData = new[] { 15000, 18000, 15500, 18500, 11000, 16000, 8000, 7500, 6500, 6000, 13500, 5000 };
for (int i = 0; i < 12; i++)
{
Month tempMonth = new Month();
tempMonth.Name = monthNames[i];
tempMonth.Sales = salesData[i];
tempMonth.Downloads = downloadsData[i];
tempMonth.Expenses = expensesData[i];
appData.Add(tempMonth);
}
}
}
public class Month
{
string _name;
long _sales, _downloads, _expenses;
public string Name
{
get { return _name; }
set { _name = value; }
}
public long Sales
{
get { return _sales; }
set { _sales = value; }
}
public long Downloads
{
get { return _downloads; }
set { _downloads = value; }
}
public long Expenses
{
get { return _expenses; }
set { _expenses = value; }
}
}
}
手順 2：FlexChart コントロールの追加
Objective-C で FlexChart コントロールを初期化するには、次の手順を実行します。
ビューで FlexChart コントロールを追加します
- Project Navigator で、
MainStoryboardをクリックしてストーリーボードエディタを開きます。 - View Controller Scene の下で、View Controller を展開し、View をクリックします。
- ストーリーボードエディタの右端のペインで、ツールバーの 3 番目のアイコンをクリックして Identity inspector を開きます。
- Custom Class の下で、ドロップダウンを使用してクラスを UI View から FlexChart に変更します。
コードで FlexChart コントロールを初期化します
FlexChart コントロールを初期化するには、Project Navigator から ViewController.m ファイルを開き、その内容を次のコードで置き換えます。これは、FlexChart を初期化するために、View コントローラの viewDidLoad メソッドをオーバーライドします。
import UIKit
import XuniFlexChartKit
class ViewController: UIViewController
{
var chart = FlexChart()
override func viewDidLoad() {
super.viewDidLoad()
// ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
self.title = NSLocalizedString("Getting Started", comment: "")
// ビューを読み込んだ後の追加セットアップを行います。
let sales = XuniSeries(forChart: chart, binding: "sales, sales", name: "2015売上")
chart.series.addObject(sales)
chart.itemsSource = Data.demoData()
chart.bindingX = "month"
self.view.addSubview(chart)
}
override func viewDidLayoutSubviews()
{
super.viewDidLayoutSubviews()
chart.frame = CGRectMake(0, 55, self.view.bounds.size.width, self.view.bounds.size.height - 55)
}
}
#import "ViewController.h"
#import "FlexChartDataSource.h"
#import <XuniFlexChartKit/XuniFlexChartKit.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
FlexChart *chart= [[FlexChart alloc] init];
chart.itemsSource = [FlexChartDataSource demoData];
chart.bindingX = @"monthsName";
XuniSeries *s1 = [[XuniSeries alloc]initForChart:chart binding:@"Sales" name:@" 2015売上"];
[chart.series addObject:s1];
self.view = chart;
chart.axisX.labelsVisible = true;
chart.axisY.labelsVisible = true;
}
@end
using System;
using Xuni.iOS.FlexChart;
using UIKit;
namespace Xuni_QuickStart
{
public partial class ViewController : UIViewController
{
protected ViewController(IntPtr handle) : base(handle)
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
//ライセンスの設定
Xuni.iOS.Core.XuniLicenseManager.Key = License.Key;
//データソースを設定します。
FlexChartDataSource ds = new FlexChartDataSource();
flexchart.ItemsSource = ds.Data;
flexchart.BindingX = "Name";
//新規チャート系列を作成します。
Series _series = new Series(flexchart, "Sales", "売上額");
_series.ChartType = ChartType.Column;
flexchart.Series.Add(_series);
}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
}
}
}
手順 3：アプリケーションの実行
Command-R を押してアプリケーションを実行します。
関連トピック