import UIKit
import XuniFlexChartKit
class ViewController: UIViewController{
var chart = FlexChart()
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Annotations"
// ビューを読み込んだ後の追加セットアップを行います。
let sales = XuniSeries(forChart: chart, binding: "sales, sales", name: "Sales")
chart.series.addObject(sales)
chart.itemsSource = ChartData.annotationData()
chart.bindingX = "name"
chart.chartType = XuniChartType.Line
self.addAnnotations(chart)
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)
}
func addAnnotations(chart: FlexChart) {
// 多角形の注釈。
let polygon = XuniChartPolygonAnnotation(chart: chart)
polygon.isVisible = true
polygon.attachment = XuniChartAnnotationAttachment.Absolute
polygon.color = UIColor.redColor()
polygon.borderColor = UIColor(red: 20.0 / 255.0, green: 153.0 / 255.0, blue: 212.0 / 255.0, alpha: 1.0)
polygon.borderWidth = 2
polygon.textColor = UIColor.blackColor()
polygon.text = "Absolute"
polygon.tooltipText = "Polygon Annotation\nPaths:[{0,0},{40,40},{80,0},\n{60,-40},{20,-40}]\nAttachment:Absolute"
let arr = NSMutableArray()
arr.addObject(XuniPoint(x: 60, y: 40))
arr.addObject(XuniPoint(x: 20, y: 80))
arr.addObject(XuniPoint(x: 35, y: 120))
arr.addObject(XuniPoint(x: 85, y: 120))
arr.addObject(XuniPoint(x: 100, y: 80))
polygon.points = arr
// 楕円の注釈
let ellipse = XuniChartEllipseAnnotation(chart: chart)
ellipse.isVisible = true
ellipse.position = XuniChartAnnotationPosition.Center
ellipse.attachment = XuniChartAnnotationAttachment.Relative
ellipse.width = 60
ellipse.height = 40
ellipse.point = XuniPoint(x: 0.8, y: 0.3)
ellipse.color = UIColor(red: 241.0 / 255.0, green: 175.0 / 255.0, blue: 102.0 / 255.0, alpha: 1.0)
ellipse.borderColor = UIColor(red: 188.0 / 255.0, green: 136.0 / 255.0, blue: 80.0 / 255.0, alpha: 1.0)
ellipse.borderWidth = 2
ellipse.text = "Relative"
ellipse.tooltipText = "Ellipse Annotation\nPoint:{0.8,0.3}\nAttachment:Relative"
// 行の注釈。
let middleY = (chart.axisY.actualDataMax - chart.axisY.actualDataMin) / 2 + chart.axisY.actualDataMin
let line = XuniChartLineAnnotation(chart: chart)
line.isVisible = true
line.attachment = XuniChartAnnotationAttachment.DataCoordinate
line.start = XuniPoint(x: 0, y: middleY)
line.end = XuniPoint(x: chart.axisX.actualDataMax, y: middleY)
line.color = UIColor.blueColor()
line.lineWidth = 3
// テキストの注釈。
let text = XuniChartTextAnnotation(chart: chart)
text.isVisible = true
text.position = XuniChartAnnotationPosition.Right
text.attachment = XuniChartAnnotationAttachment.DataCoordinate
text.width = 80
text.height = 20
text.point = XuniPoint(x: 0.3, y: middleY + 200)
text.font = UIFont.boldSystemFontOfSize(12.0)
text.text = "Data Coordinate"
// イメージの注釈。
let image = XuniChartImageAnnotation(chart: chart)
image.isVisible = true
image.position = XuniChartAnnotationPosition.Center
image.attachment = XuniChartAnnotationAttachment.DataIndex
image.seriesIndex = 0
image.pointIndex = 2
image.width = 50
image.height = 50
image.offset = XuniPoint(x: 0, y: 10)
image.source = UIImage(named: "xuni_butterfly")
image.tooltipText = "Image Annotation\nPointIndex:{2}\nAttachment:DataIndex"
// 長方形の注釈
let rect = XuniChartRectangleAnnotation(chart: chart)
rect.isVisible = true
rect.position = XuniChartAnnotationPosition.Center
rect.attachment = XuniChartAnnotationAttachment.DataIndex
rect.seriesIndex = 0
rect.pointIndex = 6
rect.width = 100
rect.height = 50
rect.color = UIColor(red: 169.0 / 255.0, green: 230.0 / 255.0, blue: 24.0 / 255.0, alpha: 1.0)
rect.borderColor = UIColor(red: 34.0 / 255.0, green: 166.0 / 255.0, blue: 60.0 / 255.0, alpha: 1.0)
rect.borderWidth = 2
rect.text = "DataIndex"
rect.tooltipText = "Rectangle Annotation\nPointIndex:{6}\nAttachment:DataIndex"
//チャートに注釈を追加します。
chart.annotations.addObject(polygon)
chart.annotations.addObject(ellipse)
chart.annotations.addObject(line)
chart.annotations.addObject(text)
chart.annotations.addObject(image)
chart.annotations.addObject(rect)
}
}
#import "ViewController.h"
#import "ChartData.h"
#import "XuniFlexChartKit/XuniFlexChartKit.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ビューを読み込んだ後の追加セットアップを行います。
FlexChart *chart = [[FlexChart alloc] init];
NSMutableArray *chartData = [ChartData annotationData];
chart.bindingX = @"name";
chart.chartType = XuniChartTypeLine;
XuniSeries *sales = [[XuniSeries alloc] initForChart:chart binding:@"sales, sales" name:@"Sales"];
[chart.series addObject:sales];
chart.itemsSource = chartData;
[self addAnnotations:chart];
chart.tag = 1;
[self.view addSubview:chart];
}
- (void)addAnnotations:(FlexChart *)chart {
// 多角形の注釈。
XuniChartPolygonAnnotation *polygon = [[XuniChartPolygonAnnotation alloc] initWithChart:chart];
polygon.isVisible = YES;
polygon.attachment = XuniChartAnnotationAttachmentAbsolute;
polygon.color = [UIColor redColor];
polygon.borderColor = [UIColor colorWithRed:20.0 / 255.0 green:153.0 / 255.0 blue:212.0 / 255.0 alpha:1.0];
polygon.borderWidth = 2;
polygon.textColor = [UIColor blackColor];
polygon.text = @"Absolute";
polygon.tooltipText = @"Polygon Annotation\nPaths:[{0,0},{40,40},{80,0},\n{60,-40},{20,-40}]\nAttachment:Absolute";
NSMutableArray *arr = [[NSMutableArray alloc] init];
[arr addObject:[[XuniPoint alloc] initX:60 Y:40]];
[arr addObject:[[XuniPoint alloc] initX:20 Y:80]];
[arr addObject:[[XuniPoint alloc] initX:35 Y:120]];
[arr addObject:[[XuniPoint alloc] initX:85 Y:120]];
[arr addObject:[[XuniPoint alloc] initX:100 Y:80]];
polygon.points = arr;
// 楕円の注釈
XuniChartEllipseAnnotation *ellipse = [[XuniChartEllipseAnnotation alloc] initWithChart:chart];
ellipse.isVisible = YES;
ellipse.position = XuniChartAnnotationPositionCenter;
ellipse.attachment = XuniChartAnnotationAttachmentRelative;
ellipse.width = 60;
ellipse.height = 40;
ellipse.point = [[XuniPoint alloc] initX:0.8 Y:0.3];
ellipse.color = [UIColor colorWithRed:241.0 / 255.0 green:175.0 / 255.0 blue:102.0 / 255.0 alpha:1.0];
ellipse.borderColor = [UIColor colorWithRed:188.0 / 255.0 green:136.0 / 255.0 blue:80.0 / 255.0 alpha:1.0];
ellipse.borderWidth = 2;
ellipse.text = @"Relative";
ellipse.tooltipText = @"Ellipse Annotation\nPoint:{0.8,0.3}\nAttachment:Relative";
// 行の注釈。
double middleY = (chart.axisY.actualDataMax - chart.axisY.actualDataMin) / 2 + chart.axisY.actualDataMin;
XuniChartLineAnnotation *line = [[XuniChartLineAnnotation alloc] initWithChart:chart];
line.isVisible = YES;
line.attachment = XuniChartAnnotationAttachmentDataCoordinate;
line.start = [[XuniPoint alloc] initX:0 Y:middleY];
line.end = [[XuniPoint alloc] initX:chart.axisX.actualDataMax Y:middleY];
line.color = [UIColor blueColor];
line.lineWidth = 3;
// テキストの注釈。
XuniChartTextAnnotation *text = [[XuniChartTextAnnotation alloc] initWithChart:chart];
text.isVisible = YES;
text.position = XuniChartAnnotationPositionRight;
text.attachment = XuniChartAnnotationAttachmentDataCoordinate;
text.width = 80;
text.height = 20;
text.point = [[XuniPoint alloc] initX:0.3 Y:middleY + 200];
text.font = [UIFont boldSystemFontOfSize:12.0];
text.text = @"Data Coordinate";
// イメージの注釈。
XuniChartImageAnnotation *image = [[XuniChartImageAnnotation alloc] initWithChart:chart];
image.isVisible = YES;
image.position = XuniChartAnnotationPositionCenter;
image.attachment = XuniChartAnnotationAttachmentDataIndex;
image.seriesIndex = 0;
image.pointIndex = 2;
image.width = 50;
image.height = 50;
image.offset = [[XuniPoint alloc] initX:0 Y:10];
image.source = [UIImage imageNamed:@"xuni_butterfly"];
image.tooltipText = @"Image Annotation\nPointIndex:{2}\nAttachment:DataIndex";
// 長方形の注釈
XuniChartRectangleAnnotation *rect = [[XuniChartRectangleAnnotation alloc] initWithChart:chart];
rect.isVisible = YES;
rect.position = XuniChartAnnotationPositionCenter;
rect.attachment = XuniChartAnnotationAttachmentDataIndex;
rect.seriesIndex = 0;
rect.pointIndex = 6;
rect.width = 100;
rect.height = 50;
rect.color = [UIColor colorWithRed:169.0 / 255.0 green:230.0 / 255.0 blue:24.0 / 255.0 alpha:1.0];
rect.borderColor = [UIColor colorWithRed:34.0 / 255.0 green:166.0 / 255.0 blue:60.0 / 255.0 alpha:1.0];
rect.borderWidth = 2;
rect.text = @"DataIndex";
rect.tooltipText = @"Rectangle Annotation\nPointIndex:{6}\nAttachment:DataIndex";
// チャートに注釈を追加します。
[chart.annotations addObject:polygon];
[chart.annotations addObject:ellipse];
[chart.annotations addObject:line];
[chart.annotations addObject:text];
[chart.annotations addObject:image];
[chart.annotations addObject:rect];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
-(void)viewDidLayoutSubviews{
[super viewDidLayoutSubviews];
FlexChart *chart = (FlexChart*)[self.view viewWithTag:1];
chart.frame = CGRectMake(0, 55, self.view.bounds.size.width, self.view.bounds.size.height - 55);
[chart setNeedsDisplay];
}
@end
