iOS开发实战:用DGCharts打造极简风格折线图

在上一篇通过DGCharts框架实现了一个较为复杂的折线图，今天手把手教你实现一款科技感十足的极简折线图。这款图表不仅视觉冲击力强，更能清晰传达数据趋势，非常适合金融类、健康监测类App使用。

一、实现效果

二、实战演练

2.1 图表功能分析

本案例实现的折线图示具有三大核心特征：

1. 去繁就简
• 完全隐藏X/Y轴坐标线
• 去除图例、网格线等冗余元素
• 零边距贴合父视图
2. 视觉焦点强化
• 平滑的贝塞尔曲线过渡
• 从折线到底部的渐变填充
• 采用暗色系背景+金色主色调
3. 高性能渲染
• 支持动态数据更新
• 流畅的曲线动画效果
• 内存占用优化

2.2 核心代码配置

针对分析结果编写特定的核心代码

• 极简样式没有X、Y轴

// X轴设置
chartView.xAxis.enabled = false

// 禁用Y轴
chartView.rightAxis.enabled = false
chartView.leftAxis.enabled = false

• 数据集配置以及填充颜色

privatefunccreateChartViewData(_ dataSetTitle: String, _ color: UIColor) -> LineChartDataSet {
// 准备数据
let xkey = [10, 11, 12, 13, 14, 15, 16]
let range = 500

var values: [ChartDataEntry] = Array()
    xkey.forEach { item in
let val = Double(arc4random_uniform(UInt32(range)))
        values.append(ChartDataEntry(x: Double(item), y: val))
    }

// 创建数据集
letset = LineChartDataSet(entries: values, label: dataSetTitle)
// 配置数据集样式
set.drawIconsEnabled = false
set.setColor(color)
set.lineWidth = 2
// 隐藏转折点的圆点
set.drawCirclesEnabled = false
set.drawCircleHoleEnabled = false
// 关闭转折点数值显示
set.drawValuesEnabled = false

// 填充设置
set.fill = ColorFill(cgColor: UIColor(red: 32/255, green: 41/255, blue: 53/255, alpha: 1).cgColor)
set.fillAlpha = 1
set.drawFilledEnabled = true

// 线条模式
set.mode = .cubicBezier // 转折点   linear 折线    cubicBezier 圆弧
returnset
}


letset = createChartViewData("Power", UIColor(red: 231/255, green: 180/255, blue: 31/255, alpha: 1))
// 创建图表数据并设置给图表
let data = LineChartData(dataSet: set)
chartView.data = data

• 间距以及图例

// 隐藏图例
chartView.legend.enabled = false

// 去除边距
chartView.minOffset = 0
chartView.setViewPortOffsets(left: 0, top: 0, right: 0, bottom: 0)

以上便是该功能的核心实现流程了。

如果觉得这篇文章对你有帮助，请  推荐+点赞+评论+关注+分享  本篇文章。