【Swift】健康とか栄養とかのバランスチャートのグラフを描く
2016/06/07
【Swift】バナナ情報がどこでも手軽にメモできるアプリを作った。という記事を書いてから、単にメモできるだけじゃなくて、バランスチャートみたいなグラフを、入力したテキストフィールドからの値に応じて描けたらよりはかどるんじゃないかという意見が得られたので、そういうのを作ってみました。
とりあえずテキストフィールドを８つ用意してそれぞれ８つの軸を表示します。
０から５までの範囲で各軸の長さを設定して、０だったら原点、５だったら最大値のところに点をプロット。
その後、各プロット座標を結んで、面積が多いほどいい、という形です。
各軸を、価格とかキレとかコクとかのステータスを設定すれば、それっぽいバランスチャートができそうです。
よく栄養バランスとかで見られるような項目、たんぱく質とか脂質とかを設定すれば、栄養バランスが一目でわかる食品グラフが作れますね。
なお、８つにしたのは、一番グラフ描画が簡単そうだったからです。
最初５つにしようとしたら、正五角形の角度とか軸の長さとかの計算が面倒くさそう。
以下、コードです。
実は各点を結んでいるわけではなく、８つの三角形を作っているだけなのですが。。。
この部分、関数化できればもっとシンプルになったのですが、角度と軸長の関係をどう設定しようか考えなければならず、細切れの時間だと頭が働かないので、とりあえずそれっぽいグラフが書ければいいやと適当にやっただけです。
これだと応用が利かないので、いずれ角度と軸長の関係を関数化できるようにして、様々な多角形に対応できるようにしたいです。
View.Controller.swift
import UIKit
class ViewController: UIViewController {
var textField1 = UITextField()
var textField2 = UITextField()
var textField3 = UITextField()
var textField4 = UITextField()
var textField5 = UITextField()
var textField6 = UITextField()
var textField7 = UITextField()
var textField8 = UITextField()
var button = UIButton()
var graph = UIView()
let lineX = UIBezierPath()
let lineY = UIBezierPath()
let line2 = UIBezierPath()
let line3 = UIBezierPath()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
addTextField(textField1, i: 1)
addTextField(textField2, i: 2)
addTextField(textField3, i: 3)
addTextField(textField4, i: 4)
addTextField(textField5, i: 5)
addTextField(textField6, i: 6)
addTextField(textField7, i: 7)
addTextField(textField8, i: 8)
button.frame = CGRectMake(20, 200, 60, 30)
button.setTitle("描画", forState: .Normal)
button.setTitleColor(UIColor.blackColor(), forState: .Normal)
button.layer.cornerRadius = 10
button.backgroundColor = UIColor.yellowColor()
button.addTarget(self, action: "picture", forControlEvents: .TouchUpInside)
self.view.addSubview(button)
}
func addTextField (newTextField: UITextField, i: CGFloat) -> () {
newTextField.frame = CGRectMake(20, 20*i, 200, 20)
newTextField.borderStyle = UITextBorderStyle.RoundedRect
self.view.addSubview(newTextField)
}
func picture() {
//view作成
let size = CGSize(width: 300, height: 300)
graph.frame = CGRectMake(20, 230, size.width, size.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
lineX.moveToPoint(CGPointMake(0, 150))//始点
lineX.addLineToPoint(CGPointMake(300, 150))//終点
lineY.moveToPoint(CGPointMake(150, 0))
lineY.addLineToPoint(CGPoint(x: 150, y: 300))
line2.moveToPoint(CGPointMake(150+150/sqrt(2), 150-150/sqrt(2)))
line2.addLineToPoint(CGPointMake(150-150/sqrt(2), 150+150/sqrt(2)))
line3.moveToPoint(CGPointMake(150-150/sqrt(2), 150-150/sqrt(2)))
line3.addLineToPoint(CGPointMake(150+150/sqrt(2), 150+150/sqrt(2)))
UIColor.blackColor().setStroke()
lineX.stroke()
lineY.stroke()
line2.stroke()
line3.stroke()
let int1 = checkTextField(textField1)
let int2 = checkTextField(textField2)
let int3 = checkTextField(textField3)
let int4 = checkTextField(textField4)
let int5 = checkTextField(textField5)
let int6 = checkTextField(textField6)
let int7 = checkTextField(textField7)
let int8 = checkTextField(textField8)
//三角形１
let triangle1 = UIBezierPath();
triangle1.moveToPoint(CGPointMake(150, 150-30*CGFloat(int1)))
triangle1.addLineToPoint(CGPointMake(150, 150))
triangle1.addLineToPoint(CGPointMake(150+30*CGFloat(int2)/sqrt(2), 150-30*CGFloat(int2)/sqrt(2)))
triangle1.addLineToPoint(CGPointMake(150, 150-30*CGFloat(int1)))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle1.stroke()
triangle1.fill()
//三角形2
let triangle2 = UIBezierPath();
triangle2.moveToPoint(CGPointMake(150+30*CGFloat(int2)/sqrt(2), 150-30*CGFloat(int2)/sqrt(2)))
triangle2.addLineToPoint(CGPointMake(150, 150))
triangle2.addLineToPoint(CGPointMake(150+30*CGFloat(int3), 150))
triangle2.addLineToPoint(CGPointMake(150+30*CGFloat(int2)/sqrt(2), 150-30*CGFloat(int2)/sqrt(2)))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle2.stroke()
triangle2.fill()
//三角形3
let triangle3 = UIBezierPath();
triangle3.moveToPoint(CGPointMake(150+30*CGFloat(int3), 150))
triangle3.addLineToPoint(CGPointMake(150, 150))
triangle3.addLineToPoint(CGPointMake(150+30*CGFloat(int4)/sqrt(2), 150+30*CGFloat(int4)/sqrt(2)))
triangle3.addLineToPoint(CGPointMake(150+30*CGFloat(int3), 150))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle3.stroke()
triangle3.fill()
//三角形4
let triangle4 = UIBezierPath();
triangle4.moveToPoint(CGPointMake(150+30*CGFloat(int4)/sqrt(2), 150+30*CGFloat(int4)/sqrt(2)))
triangle4.addLineToPoint(CGPointMake(150, 150))
triangle4.addLineToPoint(CGPointMake(150, 150+30*CGFloat(int5)))
triangle4.addLineToPoint(CGPointMake(150+30*CGFloat(int4)/sqrt(2), 150+30*CGFloat(int4)/sqrt(2)))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle4.stroke()
triangle4.fill()
//三角形5
let triangle5 = UIBezierPath();
triangle5.moveToPoint(CGPointMake(150, 150+30*CGFloat(int5)))
triangle5.addLineToPoint(CGPointMake(150, 150))
triangle5.addLineToPoint(CGPointMake(150-30*CGFloat(int6)/sqrt(2), 150+30*CGFloat(int6)/sqrt(2)))
triangle5.addLineToPoint(CGPointMake(150, 150+30*CGFloat(int5)))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle5.stroke()
triangle5.fill()
//三角形6
let triangle6 = UIBezierPath();
triangle6.moveToPoint(CGPointMake(150-30*CGFloat(int6)/sqrt(2), 150+30*CGFloat(int6)/sqrt(2)))
triangle6.addLineToPoint(CGPointMake(150, 150))
triangle6.addLineToPoint(CGPointMake(150-30*CGFloat(int7), 150))
triangle6.addLineToPoint(CGPointMake(150-30*CGFloat(int6)/sqrt(2), 150+30*CGFloat(int6)/sqrt(2)))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle6.stroke()
triangle6.fill()
//三角形7
let triangle7 = UIBezierPath();
triangle7.moveToPoint(CGPointMake(150-30*CGFloat(int7), 150))
triangle7.addLineToPoint(CGPointMake(150, 150))
triangle7.addLineToPoint(CGPointMake(150-30*CGFloat(int8)/sqrt(2), 150-30*CGFloat(int8)/sqrt(2)))
triangle7.addLineToPoint(CGPointMake(150-30*CGFloat(int7), 150))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle7.stroke()
triangle7.fill()
//三角形8
let triangle8 = UIBezierPath();
triangle8.moveToPoint(CGPointMake(150-30*CGFloat(int8)/sqrt(2), 150-30*CGFloat(int8)/sqrt(2)))
triangle8.addLineToPoint(CGPointMake(150, 150))
triangle8.addLineToPoint(CGPointMake(150, 150-30*CGFloat(int1)))
triangle8.addLineToPoint(CGPointMake(150-30*CGFloat(int8)/sqrt(2), 150-30*CGFloat(int8)/sqrt(2)))
UIColor.redColor().setStroke()
UIColor.redColor().setFill()
triangle8.stroke()
triangle8.fill()
graph.layer.contents = UIGraphicsGetImageFromCurrentImageContext().CGImage
UIGraphicsEndImageContext()
self.view.addSubview(graph)
}
func checkTextField (newTextField: UITextField) -> (Int) {
if newTextField.text == ""{
newTextField.text = "0"
}
return Int(newTextField.text!)!
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}