iOS-Charts的x轴坐标间隔与坐标个数修改

本文介绍了在使用第三方图表库Charts进行iOS开发时,如何自定义坐标轴的文字和间隔,特别是在实时变化的数据曲线场景中,如何实现从秒到分钟的单位转换。通过分析源码发现,ChartXAxis的labelCount属性被限制,通过重写AxisRendererBase.swift的computeAxisValues函数,保持设置的labelCount值,解决了坐标显示不正确的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目需要用到数据曲线,而且曲线是实时变化的,所以选择了第三方图表库Charts。选择Charts的最主要原因还是它是作者按照Android的常用曲线库MPAndroidChart写的,功能UI基本相近。

曲线的基本用法很简单,在GitHub上可以下载到demo,有各种示例,K线图、折线图和饼状图等都有。以下主要讲我自己碰到的特定问题和解决方案。

  • 自定义的坐标文字和间隔

项目曲线是根据时间不停变化的,而坐标轴是一个点一个数据,也就是对应的一秒一个数据。但是项目需求坐标单位是分钟,所以每个坐标间就有60个数据。

ChartXAxis有两个属性:axisMaximum、labelCount

    /// The maximum value for this axis.
    /// If set, this value will not be calculated automatically depending on the provided data.
    /// Use `resetCustomAxisMax()` to undo this.
    /// the number of label entries the axis should have
    /// max = 25,
    /// min = 2,
    /// default = 6,
    /// be aware that this number is not fixed and can only be approximated

按照注释的意思,我只需要设置一个最大数值,然后再设置坐标显示个数,比如我设置


                
iOS charts中,可以通过以下方式获取每个点的坐标: 1. 首先,需要获取到当前显示的图表对象,比如柱状图、折线图、散点图等等。 2. 接着,可以通过图表对象的`data`属性获取到当前显示的数据集合,比如某个柱状图的数据集合。 3. 对于每个数据点,可以使用`chartView.getTransformer(forAxis: .left)`和`chartView.getTransformer(forAxis: .bottom)`方法获取到左侧和底部坐标的`Transformer`对象。 4. 通过`Transformer`对象的`pixelForValues(x: Double, y: Double)`方法获取到数据点对应的像素坐标。 5. 最后,可以通过像素坐标计算出点的实际坐标值。 下面是一个示例代码片段,用于获取某个柱状图上所有数据点的实际坐标值: ```swift let chartView = BarChartView(frame: CGRect(x: 0, y: 0, width: 200, height: 200)) // 获取当前显示的数据集合 guard let data = chartView.data else { return } // 获取左侧和底部坐标的 Transformer 对象 let leftTransformer = chartView.getTransformer(forAxis: .left) let bottomTransformer = chartView.getTransformer(forAxis: .bottom) // 遍历数据集合中的所有数据点 for i in 0 ..< data.entryCount { // 获取数据点对应的像素坐标 let x = data.entryForIndex(i)?.x ?? 0 let y = data.entryForIndex(i)?.y ?? 0 let pixelPoint = CGPoint(x: CGFloat(x), y: CGFloat(y)) // 计算出点的实际坐标值 let realPoint = CGPoint(x: bottomTransformer.valueForTouchPoint(point: pixelPoint).x, y: leftTransformer.valueForTouchPoint(point: pixelPoint).y) print("Point \(i): \(realPoint)") } ``` 以上代码中,`BarChartView`是某个柱状图的实例,通过遍历数据集合中的所有数据点,使用`getTransformer(forAxis:)`方法获取左侧和底部坐标的`Transformer`对象,然后通过`valueForTouchPoint(point:)`方法计算出实际坐标值,并打印出来。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值