快速创建饼图 [英] Creating a pie chart in swift

问题描述

我正在尝试快速创建一个饼图，并且希望从头开始创建代码，而不是使用第三方扩展.

I'm trying to create a pie chart in swift, and would like to create the code from scratch rather than use a 3rd party extension.

我喜欢@IBDesignable这样的想法，所以我从这里开始:

I like the idea of it being @IBDesignable, so I started with this:

import Foundation
import UIKit

@IBDesignable class PieChart: UIView {

  var data:  Dictionary<String,Int>?

  required init(coder aDecoder: NSCoder) {
    super.init(coder:aDecoder)!
    self.contentMode = .Redraw
  }

  override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.clearColor()
    self.contentMode = .Redraw
  }

  override fun drawRect(rect: CGRect) {
    // draw the chart in here
  }

}

我不确定如何将数据最好地放入图表中.我应该有这样的东西吗?

What I'm not sure about, is how best to get the data into the chart. Should I have something like this:

@IBOutlet weak var pieChart: PieChart!
override func viewDidLoad() {
    pieChart.data = pieData
    pieChart.setNeedsDisplay()
}

还是有更好的方法?大概没有办法在init函数中包含数据吗?

Or is there a better way? Presumably, there is no way to include the data in the init function?

提前谢谢！

推荐答案

您可以创建一个包含数据的便捷初始化，但这仅在您通过代码创建视图时才有用.如果将视图添加到情节提要中，则需要一种在创建视图后设置数据的方法.

You could create a convenience init that includes the data, but that would only be useful if you are creating the view from code. If your view is added in the Storyboard, you will want a way to set the data after the view has been created.

最好查看标准UI元素(如UIButton)以获取设计线索.您可以更改UIButton上的属性，而无需调用myButton.setNeedsDisplay()即可对其进行更新，因此，您应该设计饼图以相同的方式工作.

It is good to look at the standard UI elements (like UIButton) for design clues. You can change properties on a UIButton and it updates without you having to call myButton.setNeedsDisplay(), so you should design your pie chart to work in the same manner.

最好拥有包含数据的视图属性.视图应负责重绘自身，因此请为您的data属性定义didSet并在其中调用setNeedsDisplay().

It is fine to have a property of your view that holds the data. The view should take responsibility for redrawing itself, so define didSet for your data property and call setNeedsDisplay() there.

var data:  Dictionary<String,Int>? {
    didSet {
        // Data changed.  Redraw the view.
        self.setNeedsDisplay()
    }
}

然后您可以简单地设置数据，饼图将重新绘制:

Then you can simply set the data, and the pie chart will redraw:

pieChart.data = pieData

您可以将其扩展到饼图上的其他属性.例如，您可能要更改背景色.您还要为该属性定义didSet并调用setNeedsDisplay.

You can extend this to other properties on your pie chart. For instance, you might want to change the background color. You'd define didSet for that property as well and call setNeedsDisplay.

请注意，setNeedsDisplay只是设置一个标志，稍后将绘制视图.多次调用setNeedsDisplay不会导致视图多次重画，因此您可以执行以下操作:

Note that setNeedsDisplay just sets a flag and the view will be drawn later. Multiple calls to setNeedsDisplay won't cause your view to redraw multiple times, so you can do something like:

pieChart.data = pieData
pieChart.backgroundColor = .redColor()
pieChart.draw3D = true  // draw the pie chart in 3D

并且pieChart只会重绘一次.

and the pieChart would redraw just once.

这篇关于快速创建饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！