Swift Charts绘制折线图+横坐标字体选中高亮
2021-08-10 本文已影响0人
jzhang
之前做的折线图功能，使用了比较流行的Charts框架，由于里面存在很多细节，简单做一下记录以免忘记（Demo在最后）
234
集成Charts框架
版本问题：最新版本是4.0.1 Release，但是实测下来折线图上的点击存在严重的bug，基本无法使用，不确定是不是因为Xcode12.4不兼容。万幸v4.0.0 没有问题，就采用这个版本了。
集成问题：其实集成本身没有什么困难的，官方提供了很多集成方式。困难的是我们公司规定直接用xcframework，所以需要自己打包成xcframework，使用官方集成方式的同学可以略过这一步。
下面是用到的命令
cd lottie-ios-3.1.8
rm -rf build
mkdir build
xcodebuild -target Charts -configuration Release -sdk iphoneos ENABLE_BITCODE=YES BITCODE_GENERATION_MODE=bitcode ONLY_ACTIVE_ARCH=NO BUILD_DIR=build BUILD_ROOT=build clean build
xcodebuild -target Charts -configuration Debug -sdk iphonesimulator ENABLE_BITCODE=YES BITCODE_GENERATION_MODE=bitcode ONLY_ACTIVE_ARCH=NO BUILD_DIR=build BUILD_ROOT=build clean build
rm -rf build/Charts.xcframework
xcodebuild -create-xcframework \
-framework build/Debug-iphonesimulator/Charts.framework \
-framework build/Release-iphoneos/Charts.framework \
-output build/Charts.xcframework
难点1：选中x轴文字高亮颜色
这个效果Charts本身并不支持，需要自定义XAxisRenderer来实现
import Charts
import Foundation
class CreditScoreXAxisRenderer: XAxisRenderer {
var selectedLabel: String?
override func drawLabel(
context: CGContext,
formattedLabel: String,
x: CGFloat, y: CGFloat,
attributes: [NSAttributedString.Key: Any],
constrainedTo size: CGSize,
anchor: CGPoint,
angleRadians: CGFloat
) {
if formattedLabel == selectedLabel {
var selectedAttributes = attributes
selectedAttributes[.font] = UIFont.boldSystemFont(ofSize: 12)
selectedAttributes[.foregroundColor] = UIColor.black
super.drawLabel(context: context,
formattedLabel: formattedLabel,
x: x,
y: y,
attributes: selectedAttributes,
constrainedTo: size,
anchor: anchor,
angleRadians: angleRadians)
} else {
super.drawLabel(context: context,
formattedLabel: formattedLabel,
x: x,
y: y,
attributes: attributes,
constrainedTo: size,
anchor: anchor,
angleRadians: angleRadians)
}
}
}
难点2：选中的点变成实心圆点
试下来Charts本身属性不支持单独把数据点设置成实心，所以取巧在选中数据点上显示实心圆点的图片
// 将选中的数据点改成实心圆点图片
let chartDataSet = (chartView.data?.dataSets[0] as? LineChartDataSet)!
let values = chartDataSet.entries
values.forEach { entry in
entry.icon = nil
}
entry.icon = UIImage(named: "circle_pointer")
难点3：双击选中数据的时候会自动取消选中效果的bug
class CreditScoreLineChartView: LineChartView {
override func zoom(scaleX: CGFloat, scaleY: CGFloat, x: CGFloat, y: CGFloat) {}
}
主要代码：
struct Param {
static var lineColor = UIColor(red: 0.161, green: 0.271, blue: 1, alpha: 1)
static var hilightColor = lineColor.withAlphaComponent(0.03)
}
class ViewController: UIViewController, ChartViewDelegate {
var chartView: CreditScoreLineChartView!
let months: [String] = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
// 所有点的颜色
var circleColors: [UIColor] = []
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
// 创建折线图组件对象
chartView = CreditScoreLineChartView()
chartView.frame = CGRect(x: 20, y: 300, width: view.bounds.width - 40, height: 270)
chartView.delegate = self // 设置代理
chartView.setScaleEnabled(false)
chartView.leftAxis.axisMinimum = 300 // 左y轴数据最小值
chartView.leftAxis.axisMaximum = 850 // 左y轴数据最大值
chartView.leftAxis.granularity = 110 // 左y轴数据间隔
chartView.leftAxis.setLabelCount(6, force: true) // 左y轴有几个label
chartView.xAxis.drawAxisLineEnabled = false // 竖向网格线
chartView.xAxis.axisMinimum = -0.2 // 设置x轴最小值，使左边多一点空间
chartView.xAxis.axisMaximum = 5.2 // 设置x轴最大值，使右边多一点空间
let ll1 = ChartLimitLine(limit: 800, label: " ")
ll1.lineWidth = 1
ll1.lineColor = UIColor(red: 0, green: 0.698, blue: 0.294, alpha: 1)
ll1.lineDashLengths = [3, 2]
ll1.labelPosition = .rightTop
ll1.valueFont = .systemFont(ofSize: 10)
let ll2 = ChartLimitLine(limit: 650, label: " ")
ll2.lineColor = UIColor(red: 0.3, green: 0.3, blue: 0.3, alpha: 1)
ll2.lineWidth = 1
ll2.lineDashLengths = [3, 2]
ll2.labelPosition = .rightBottom
ll2.valueFont = .systemFont(ofSize: 10)
chartView.leftAxis.addLimitLine(ll1)
chartView.leftAxis.addLimitLine(ll2)
// 网格只显示竖线
chartView.chartDescription.enabled = false
chartView.leftAxis.drawGridLinesEnabled = false
chartView.leftAxis.drawAxisLineEnabled = false
// 网格只显示竖线
chartView.rightAxis.enabled = false
chartView.xAxis.labelPosition = .bottom
chartView.legend.enabled = false
view.addSubview(chartView)
chartView.xAxis.granularity = 1 // 间隔尺寸，粒度
chartView.xAxis.labelCount = months.count // x轴标题数量
chartView.xAxis.labelFont = UIFont.systemFont(ofSize: 12)
chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: months)
chartView.xAxis.labelTextColor = .lightGray
chartView.xAxis.gridColor = UIColor(red: 0.898, green: 0.898, blue: 0.898, alpha: 1) // x轴网格线颜色
// 生成随机数据
var dataEntries = [ChartDataEntry]()
let values: [Double] = [500, 530, 520, 500, 530, 560]
for (i, value) in values.enumerated() {
let entry = ChartDataEntry(x: Double(i), y: value)
dataEntries.append(entry)
}
let chartDataSet = LineChartDataSet(entries: dataEntries, label: "图例1")
// 目前折线图只包括1根折线
let chartData = LineChartData(dataSets: [chartDataSet])
// 设置折点颜色
chartDataSet.setColor(Param.lineColor) // 线颜色
chartDataSet.drawIconsEnabled = true // 允许绘制图片
chartDataSet.circleRadius = 4 // 数据点半径
chartDataSet.circleHoleRadius = 2 // 数据点孔半径
chartDataSet.lineWidth = 2 // 线宽
chartDataSet.drawValuesEnabled = false
chartDataSet.setCircleColor(Param.lineColor) // 圆圈颜色
chartDataSet.highlightColor = Param.hilightColor // 十字线颜色
chartDataSet.highlightLineWidth = 20 // 十字线线宽
chartDataSet.drawHorizontalHighlightIndicatorEnabled = false // 不显示横向十字线
// 设置折现图数据
chartView.data = chartData
chartView.xAxisRenderer = CreditScoreXAxisRenderer(viewPortHandler: chartView.viewPortHandler, axis: chartView.xAxis, transformer: chartView.getTransformer(forAxis: .left))
chartView.highlightValue(x: 5, dataSetIndex: 0)
}
// 折线上的点选中回调
func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
let selectLabel = months[Int(entry.x)]
(self.chartView.xAxisRenderer as! CreditScoreXAxisRenderer).selectedLabel = selectLabel
// 将选中的数据点改成实心圆点图片
let chartDataSet = (chartView.data?.dataSets[0] as? LineChartDataSet)!
let values = chartDataSet.entries
values.forEach { entry in
entry.icon = nil
}
entry.icon = UIImage(named: "circle_pointer")
// 重新渲染表格
chartView.data?.notifyDataChanged()
chartView.notifyDataSetChanged()
}
}
Demo地址：LineChartsDemo
