Swift Charts 绘制柱状图配置
2021-03-01 本文已影响0人
Aliv丶Zz
可以自定义一个View继承BarChartView，然后对其进行初始化配置
class CustomBarChartView: BarChartView{
/// 是否动画
var isAnimate : Bool = false
/// 柱状图的数据源
var dataSource:[CustomBarChartModel]?{
didSet
{
setData()
}
}
private lazy var labelCount: Int = {
var count = dataSource?.count ?? 5
if count > 5 {
count = 5
}
return count
}()
override init(frame: CGRect) {
super.init(frame: frame)
initStyle()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func initStyle()
{
addViewStyle()
addXAxisStyle()
addYAxisStyle()
}
}
- 初始化页面配置
func addViewStyle() {
self.noDataText = "You need to provide data for the chart." //没有数据时的文字提示
self.drawValueAboveBarEnabled = true //数值显示在柱形的上面
self.drawBarShadowEnabled = true //是否绘制柱形的阴影背景
//barChartView的交互设置
self.scaleYEnabled = false //取消Y轴缩放
self.doubleTapToZoomEnabled = false //取消双击缩放
self.dragEnabled = true //启用拖拽图表
self.dragDecelerationEnabled = false //拖拽后是否有惯性效果
self.dragDecelerationFrictionCoef = 0 //拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显
//最大高亮距离(点击事件识别区间)
self.maxHighlightDistance = 20
self.legend.enabled = true //是否显示图例
self.legend.form = .none // 图例样式
self.chartDescription?.text = " " //不显示，就设为空字符串即可
//图表周围的最小偏移量，值越大图表越小。默认为0
self.extraTopOffset = 30
self.extraBottomOffset = 10
}
- 设置X轴样式
//设置X轴样式
private func addXAxisStyle(){
let xAxis = self.xAxis
xAxis.axisLineWidth = 1 //设置X轴线宽
xAxis.labelFont = UIFont.systemFont(ofSize: 12)
xAxis.labelPosition = .bottom //X轴的显示位置，默认是显示在上面的
xAxis.centerAxisLabelsEnabled = false //文字标签居中
xAxis.granularity = 1
xAxis.drawGridLinesEnabled = false //不绘制网格线
xAxis.labelTextColor = UIColor.hex(hexString: "#757575")
//label文字颜色
xAxis.wordWrapEnabled = true // 换行 显示图例
xAxis.wordWrapWidthPercent = 0.8
//xAxis.labelRotationAngle = -30 //刻度文字倾斜角度
}
- 设置Y轴样式
//设置Y轴样式
private func addYAxisStyle(){
let leftAxis = self.leftAxis
//leftAxis = false //是否只显示最大值和最小值
leftAxis.axisMinimum = 0 //设置Y轴的最小值
leftAxis.drawZeroLineEnabled = true //从0开始绘制
leftAxis.axisMaximum = 100 //设置Y轴的最大值
leftAxis.inverted = false //是否将Y轴进行上下翻转
leftAxis.axisLineWidth = 0.5 //Y轴线宽
leftAxis.axisLineColor = UIColor.black //Y轴颜色
leftAxis.labelCount = labelCount
leftAxis.forceLabelsEnabled = false //不强制绘制制定数量的label
//设置Y轴上标签的样式
leftAxis.labelPosition = .outsideChart //label位置
leftAxis.labelTextColor = UIColor.hex(hexString: "#757575") //文字颜色
leftAxis.labelFont = UIFont.systemFont(ofSize: 10) //文字字体
//设置Y轴上标签显示数字的格式
let leftFormatter = NumberFormatter() //自定义格式
leftFormatter.positiveSuffix = "$" //数字后缀单位
leftFormatter.numberStyle = .decimal
leftAxis.valueFormatter = DefaultAxisValueFormatter.init(formatter: leftFormatter)
leftAxis.valueFormatter = DefaultAxisValueFormatter(decimals: 2)
//设置Y轴上网格线的样式
leftAxis.gridLineDashLengths = [3.0, 3.0] //设置虚线样式的网格线
leftAxis.gridColor = UIColor.init(red: 200/255.0, green: 200/255.0, blue: 200/255.0, alpha: 1.0) //网格线颜色
leftAxis.gridAntialiasEnabled = true //开启抗锯齿
//设置右侧Y轴的样式
let rightAxis = self.rightAxis
rightAxis.enabled = false //不绘制右边轴
}
- 数据设置
func setData()
{
var xVals = [String]()
var yVals = [BarChartDataEntry]()
var i : Double = 0
for s in dataSource ?? []{
xVals.append(s.DeptName ?? "")
let val = Double(s.DeptRate ?? "") ?? 0
// 初始化
yVals.append(BarChartDataEntry.init(x: i, y: val, data: s))
i += 1
}
self.xAxis.valueFormatter = IndexAxisValueFormatter(values:xVals)
//创建BarChartDataSet对象，其中包含有Y轴数据信息，以及可以设置柱形样式
let set1 = BarChartDataSet(entries: yVals, label: "")
set1.drawValuesEnabled = true //是否在柱形图上面显示数值
set1.highlightEnabled = true // 是否可以点击，
set1.highlightAlpha = 0 // 默认：CGFloat(120.0 / 255.0)
set1.colors = [.hex(hexString: "#7786EC")] //柱状图颜色
set1.barShadowColor = .hex(hexString: "#F0F0F0") //阴影颜色
//将BarChartDataSet对象放入数组中
var dataSets = [BarChartDataSet]()
dataSets.append(set1)
//创建BarChartData对象, 此对象就是barChartView需要最终数据对象
let data:BarChartData = BarChartData(dataSets: dataSets)
data.setValueFont(UIFont.systemFont(ofSize: 14))
data.setValueTextColor(UIColor.hex(hexString: "#202020")) //文字颜色
//不显示小数
data.setValueFormatter(DefaultValueFormatter(decimals: 0))
let zoom = CGFloat(dataSource?.count ?? 0) / 5.0
//设置柱状图宽度占比 及 放大的倍数
if zoom > 1 {
data.barWidth = 0.5 // 宽度占比
let handler = self.viewPortHandler
handler?.setMinimumScaleX(zoom)
handler?.setMaximumScaleX(zoom*3)
}else{
data.barWidth = Double(zoom / 2.0) // 宽度占比
let handler = self.viewPortHandler
handler?.setMinimumScaleX(1)
handler?.setMaximumScaleX(3)
}
// 绑定数据
self.data = data
if isAnimate {
self.animate(yAxisDuration: 1)
}else{
self.animate(yAxisDuration: 0)
}
}
适配过程中出现的问题：
- 点击选中，后需要取消选中，不能连续点击
我没找到对应的属性可以设置，所以只能修改源码进行调整，在
BarLineChartViewBase文件tapGestureRecognized方法中lastHighlighted为上次选中的高亮item，只需将if h === nil || h == self.lastHighlighted
修改为：if h === nil
修改后：
柱状图点击事件
- 有数据点击响应事件，点击阴影不响应的设置
在
BarHighlighter中，添加代码：/// 点击位置超出了 柱状图的y值 则不响应 guard CGFloat(high.y) > pos.y else{ return nil }
修改后：
截屏2021-03-01 下午6.48.42.png
- 点击柱状图时，即便点击空白区域(两个柱状图中间)也会选中
在 addViewStyle 方法中增加：
//该属性可理解为点击识别范围，以每一个柱状图中心为中心
self.maxHighlightDistance = 20
