对于charts的基本用法,百度即可,本文讲解两个关键点代码,参考蜡状图用以下两个实例来进行讲解。
先上实例图:
蜡状图的使用类是CombinedChartView,当我们在上面进行点击时,charts会给生成默认的十字样式,当你去查看的时候,你会发现有一个highlighter属性,来决定此十字样式的生成或隐藏,如果没有深层了解,都无法清楚其如何产生,k线生成使用重绘方式【draw(_rect:CGRect) 与 setNeedsDisplay()结合】来渲染成图片。
实例1,触摸点显示十字样式
详解: 创建一个类CustomCombinedChartView:CombinedChartView,同时定义一个协议protocol CustomChartViewTapDelegate: ChartViewDelegate;
CustomCombinedChartView内部自定义tap手势覆盖charts的tap手势,手势绑定的事件方法内部实现:
...
var pt = recognizer.location(in:self)
///此句是关键代码,&pt是因为此处有inout定义,传入的是数据实体,改变的也是数据本身,并非索引
getTransformer(forAxis: .left).pixelToValues(&pt)
customDelegate.customChartTapAction!(chartView:self, gestrue: recognizer, selectedIndex:Int(round(pt.x)))
...
CustomChartViewTapDelegate协议内部实现以下方法,传送CustomCombinedChartView实例和tap手势实例
...code
func customChartTapAction(chartView:ChartViewBase, gestrue:UITapGestureRecognizer, selectedIndex:Int)
...
此方法是在外部使用CustomCombinedChartView的时候,需要添加十字样式时遵循实现。
想要获取触摸点的在蜡状图中对应的k线坐标值,可以通过以下代码:
...
pt = gestrue.location(in:lineChart)
let value = lineChart.valueForTouchPoint(point: pt, axis: .left).y
value即是坐标值
...
2,添加最新数据收盘标签(即是图中深蓝色背景的):
承上:
在CustomCombinedChartView内部定义一个接收最后一条收盘数据的double属性close,
重写draw(_rect:CGRect)方法,简单实现如下:
...
overridefunc draw(_rect:CGRect) {
super.draw(rect)
// 此y值即是k线图数值转化后的视图UI坐标
let y =pixelForValues(x:0, y: close, axis: .right).y
}
...
3,小点子
(1)使蜡状图右部纵轴对齐的方式【红色框即是】:
rightAxis.enabled = true // 显示此右侧坐标轴
rightAxis.maxWidth = 50
rightAxis.minWidth = 50
(2) 纵坐标保留6位有效数字:
...
let numberForm = NumberFormatter()
numberForm.minimumIntegerDigits = 1
numberForm.generatesDecimalNumbers = true
numberForm.maximumSignificantDigits = 6
letaxisFormatter =DefaultAxisValueFormatter(formatter: numberForm)
rightAxis.valueFormatter = axisFormatter
...
谢谢阅读