外観のカスタマイズ

ネイティブ iOS 対応の Xuni コントロールは、すべてのプラットフォームで使用できる Light テーマと Dark テーマの両方で機能するように設計されています。しかし、FlexChart コントロールの外観をカスタマイズするためのプロパティがいくつかあります。コントロールの外観を向上させるために、チャートの背景色を変更したり、系列の色を設定したり、指定した太さの色付き境界線をチャートや系列に追加することができます。

次の図は、カスタマイズされた FlexChart コントロールを示しています。

次のコード例は、FlexChart とその系列をカスタマイズする方法を示します。この例は、「クイックスタート」セクションで作成したサンプルのチャートに複数の系列を追加したものを使用します。FlexChart に複数の系列を追加する方法については、「複合チャート」を参照してください。

let sales = XuniSeries(forChart: chart, binding: "sales, sales", name: "2015売上")
let expenses = XuniSeries(forChart: chart, binding: "expenses, expenses", name: "2015経費")
let downloads = XuniSeries(forChart: chart, binding: "downloads, downloads", name: "2015ダウンロード")
            
chart.series.addObject(sales)
chart.series.addObject(expenses)
chart.series.addObject(downloads)
        
chart.itemsSource = Data.demoData()
chart.bindingX = "month"
        
chart.legend.position = XuniChartLegendPosition.Right
sales.color = UIColor.greenColor()
sales.borderColor = UIColor.brownColor()
sales.borderWidth = 2
        
expenses.color = UIColor.redColor()
expenses.borderColor = UIColor.brownColor()
expenses.borderWidth = 2
        
downloads.chartType = XuniChartType.LineSymbols
downloads.color = UIColor.yellowColor()
downloads.borderWidth = 10
downloads.symbolColor = UIColor.cyanColor()
downloads.symbolBorderWidth = 5
downloads.symbolBorderColor = UIColor.darkGrayColor()

XuniSeries *sales = [[XuniSeries alloc]initForChart:chart binding:@"Sales" name:@" 2015売上"];
    [chart.series addObject:sales];
XuniSeries *expenses = [[XuniSeries alloc]initForChart:chart binding:@"Expenses" name:@" 2015経費"];
    [chart.series addObject:expenses];
XuniSeries *downloads = [[XuniSeries alloc]initForChart:chart binding:@"Downloads" name:@" 2015ダウンロード"];
    [chart.series addObject:downloads];

chart.legend.position = XuniChartLegendPositionRight;
sales.color = [UIColor greenColor];
sales.borderColor = [UIColor colorWithRed:0 green:1 blue:0 alpha:1];
sales.borderWidth = 2;

expenses.color = [UIColor redColor];
expenses.borderColor = [UIColor colorWithRed:.502 green:0 blue:0 alpha:1];
expenses.borderWidth = 2;

downloads.chartType = XuniChartTypeLineSymbols;
downloads.color = [UIColor colorWithRed:1 green:0.416 blue:0 alpha:1];
downloads.borderWidth = 10;
downloads.symbolColor = [UIColor yellowColor];
downloads.symbolBorderColor = [UIColor yellowColor];
downloads.symbolBorderWidth = 5;

sales.color = UIColor.Green;
sales.BorderColor = UIColor.FromRGBA(0,1,0,1);
sales.BorderWidth = 2;

expenses.Color = UIColor.Red;
expenses.BorderColor = UIColor.FromRGBA(0,0,0,1);
expenses.BorderWidth = 2;

downloads.chartType = ChartType.ChartTypeLineSymbols;
downloads.color = UIColor.FromRGBA(1,0,0,1);
downloads.borderWidth = 10;
downloads.symbolColor = UIColor.Yellow;
downloads.symbolBorderColor = UIColor.Yellow;
downloads.symbolBorderWidth = 5;