Charts是一个很强大的工具，内容丰富。正因为内容包含之广，所以他的各种配置至关重要。下面我就为大家简单介绍一下。
- 首先下载Charts,并导入自己的项目
- 接着，可以拖一个继承LineChartView的UIView，当然也可以初始化一个
let graphView = LineChartView(frame: CGRect(x: 0, y: 0, width: DEVICE_WIDTH, height: DEVICE_HEIGHT))
- 接着是一些重要的配置
graphView.delegate = self // 设置代理
graphView.backgroundColor = UIColor.white // 背景颜色
graphView.setViewPortOffsets(left: 10, top: 5, right: 15, bottom: 20) // 距离上下左右边距
graphView.chartDescription?.enabled = false // 图形介绍
graphView.legend.enabled = false // 图例显示与否
graphView.dragEnabled = true // 是否允许拖拽
// 手势放大和缩小
// graphView.setScaleEnabled(false) // 整体设置
graphView.scaleXEnabled = true
graphView.scaleYEnabled = false
graphView.drawGridBackgroundEnabled = false // 是否显示网格标志
graphView.pinchZoomEnabled = false // x轴和y轴缩放
// 左右Y轴都没有
graphView.rightAxis.enabled = false
graphView.leftAxis.enabled = false
graphView.animate(xAxisDuration: 2.5) // 曲线图展示动画
// X轴
let xAxis = graphView.xAxis
xAxis.axisLineWidth = 1 // X轴宽度
xAxis.axisLineColor = UIColor.backgroundColor // X轴颜色
xAxis.labelPosition = .bottom // X轴位置
xAxis.labelFont = UIFont.systemFont(ofSize: 12) // 字体
xAxis.labelTextColor = UIColor.themTwoColor // 字体颜色
xAxis.drawGridLinesEnabled = false // 网格
xAxis.labelCount = 7 // X轴显示label个数
// 设置数据
var xValues: [String] = []
var yValues: [ChartDataEntry] = []
for i in 0..<modelList.count {
let value = Double(modelList[i].sum)!
let time = modelList[i].dt
if time.characters.count == 10 {
let arr = time.components(separatedBy: "-")
xValues.append(arr[1] + "." + arr[2])
} else {
xValues.append(time)
}
yValues.append(ChartDataEntry.init(x: Double(i), y: value))
}
xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues)
var set: LineChartDataSet?
if (graphView.data != nil) {
set = graphView.data?.dataSets[0] as? LineChartDataSet
set?.values = yValues
graphView.data?.notifyDataChanged()
graphView.notifyDataSetChanged()
} else {
set = LineChartDataSet.init(values: yValues, label: "订单金额")
set?.mode = .cubicBezier // 圆滑的曲线
set?.lineWidth = 1.5 // 曲线宽度
set?.circleRadius = 2 // 拐点半径
set?.setCircleColor(UIColor.colorWithHex("006fc2")) // 拐点颜色
set?.setColor(UIColor.colorWithHex("c3daee"))
set?.fillAlpha = 1
set?.fillColor = UIColor.white
set?.drawValuesEnabled = true // 是否在拐点处显示数据
set?.drawCircleHoleEnabled = true // 是否绘制拐点中间的空心
set?.drawFilledEnabled = false // 是否填充颜色
// 渐变色
let gradientColors = [ChartColorTemplates.colorFromString("#FFFFFFFF").cgColor, ChartColorTemplates.colorFromString("#FF007FFF").cgColor]
let gradientColorsRef = CGGradient(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil)
set?.fill = Fill.fillWithLinearGradient(gradientColorsRef!, angle: 90.0)
set?.fillAlpha = 0.3 // 填充颜色的透明度
set?.drawHorizontalHighlightIndicatorEnabled = false // 选中时横坐标隐藏
let data = LineChartData.init(dataSets: [set!])
data.setValueFont(UIFont.systemFont(ofSize: 11.0))
data.setValueTextColor(UIColor.themTwoColor)
graphView.data = data
}
- 最后ChartViewDelegate
func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
print("====chartValueNothingSelected")
graphView.centerViewToAnimated(xValue: entry.x, yValue: entry.y, axis: (graphView.data?.getDataSetByIndex(highlight.dataSetIndex).axisDependency)!, duration: 1.0)
}
func chartValueNothingSelected(_ chartView: ChartViewBase) {
print("chartValueNothingSelected")
}
PS: 如果点击时需要标注弹框需要的设置如下：
let marker: GraphMarker = GraphMarker.init(color: UIColor.themOneColor, font: UIFont.systemFont(ofSize: 12.0), textColor: UIColor.white, insets: UIEdgeInsets(top: 5, left: 5, bottom: 15, right: 5))
marker.chartView = self.graphView
marker.minimumSize = CGSize(width: 30, height: 25)
self.graphView.marker = marker
