DGCharts LineChart完整教程：从基础折线图到渐变填充与贝塞尔曲线

DGCharts LineChart完整教程：从基础折线图到渐变填充与贝塞尔曲线

【免费下载链接】ChartsBeautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.项目地址: https://gitcode.com/gh_mirrors/cha/Charts

DGCharts（原名 Charts）是 iOS/tvOS/macOS 平台上最流行的开源图表库，而LineChartView是其中使用频率最高的组件之一。本教程带你从零搭建 DGCharts 折线图，逐步掌握数据点圆圈、渐变色填充（Gradient Fill）与贝塞尔曲线（Cubic Bezier）三大进阶技巧，10 分钟即可做出漂亮的趋势图表。

一、5 分钟搭建第一个折线图

在 Xcode 中通过 CocoaPods 或 SPM 引入 DGCharts 后（参考 README.md 的 Usage 章节），只需四步即可画出第一条折线：

import DGCharts // 1. 创建数据点 let entries: [ChartDataEntry] = [ ChartDataEntry(x: 0, y: 12), ChartDataEntry(x: 1, y: 25), ChartDataEntry(x: 2, y: 18) ] // 2. 创建数据集（LineChartDataSet 定义了折线的所有样式） let set = LineChartDataSet(entries: entries, label: "月度数据") set.lineWidth = 2 set.circleRadius = 3 // 3. 创建图表数据 let data = LineChartData(dataSet: set) // 4. 交给视图渲染 lineChartView.data = data

LineChartView继承自BarLineChartViewBase，内部使用专门的渲染器完成绘制，定义见 LineChartView.swift。

二、折线与数据点圆圈：常用样式速查

LineChartDataSet暴露了大量开箱即用的属性，下表是最常用的几个：

想要"空心小圆点"这种精致风格，只需：

set.circleRadius = 4 set.circleHoleRadius = 2 set.setCircleColor(.white) // 点颜色 set.circleHoleColor = .blue // 孔颜色

完整属性清单可查看 LineChartDataSetProtocol.swift。

三、渐变填充：让折线下方"上色"

这是折线图最惊艳的效果之一。开启填充只需两个属性：

set.drawFilledEnabled = true // 打开填充 set.fillColor = .systemBlue // 填充颜色 set.fillAlpha = 0.33 // 填充透明度（默认 0.33）

填充区域的"底边"由FillFormatter决定，默认实现是 DefaultFillFormatter.swift：数据全为正数时填充到 Y 轴最小值，数据全为负数时填充到最大值，正负混合时填充到 0 线。想固定填充到某个值，用闭包写法一行搞定：

// 填充固定到 Y 轴最小值（常见于全屏趋势图） set.fillFormatter = DefaultFillFormatter { _, _ in return self.lineChartView.leftAxis.axisMinimum }

官方 Demo 中"上顶到最大值、下底到最小值"的双数据集填充案例，可直接阅读 LineChartFilledViewController.swift。

真正的"渐变色"填充：LinearGradientFill

fillColor只能填纯色，想要蓝→紫这种渐变，需要用到fill属性配合LinearGradientFill：

let colors = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor] let gradient = CGGradient(colorsSpace: nil, colors: colors as CFArray, locations: nil)! set.fill = LinearGradientFill(gradient: gradient, angle: 90) set.drawFilledEnabled = true

Fill协议内置了四种填充器，全部定义在 Fill.swift：

• ColorFill—— 纯色填充
• LinearGradientFill—— 线性渐变（最常用）
• RadialGradientFill—— 径向渐变
• ImageFill—— 用图片填充（支持平铺）

Demo 中"透明蓝→红色"的渐变填充写法见 LineChart1ViewController.swift。

四、贝塞尔曲线：一键平滑折线

默认的mode = .linear画出来是折线段。DGCharts 提供四种曲线模式（定义见 LineChartDataSet.swift#L18-L25）：

平滑曲线只需一行：

set.mode = .cubicBezier set.cubicIntensity = 0.6 // 曲线强度 0.05~1，默认 0.2，越大越"飘"

💡 小贴士：cubicIntensity调到 1 时曲线会非常夸张地过冲，推荐 0.5~0.8 之间微调，视觉效果最自然。

曲线 + 自定义填充底边的完整 Demo，参见 CubicLineChartViewController.swift，其中还演示了如何自定义FillFormatter把填充底边固定到-10。

五、让图表动起来：动画与高亮

数据加载时的生长动画只需一行，配合前文的效果非常出片：

lineChartView.animate(xAxisDuration: 2.5) // X 轴展开 lineChartView.animate(xAxisDuration: 2, yAxisDuration: 2, easingOption: .easeOutQuart) // 双轴 + 缓动曲线

用户点按数据点时的高亮样式，通过highlightColor设置：

set.highlightColor = .systemRed lineChartView.maxHighlightDistance = 50 // 点按距离数据点 50pt 内都可选中

缓动曲线枚举见 ChartAnimationEasing.swift。

六、新手常见问题（FAQ）

Q1：数据更新了但图表没变化？赋值给lineChartView.data后记得调用lineChartView.setNeedsDisplay()；若数据是同一个引用修改的，可改用lineChartView.data?.notifyDataChanged()。

Q2：如何同时显示多条折线？把多个LineChartDataSet一起放进LineChartData(dataSets: [set1, set2])，图例会按数据集颜色自动生成，legend.form = .line可把图例图标画成短线条。

Q3：折线数据点太多、圆圈挤成一团？关闭圆圈set.drawCirclesEnabled = false（性能也会更好），或在数据密集时动态调小circleRadius。

写在最后

掌握LineChartDataSet的样式属性、FillFormatter填充控制与四种曲线mode，你就能覆盖 90% 的折线图需求。想要更多现成写法，推荐直接浏览官方 Demo 目录 ChartsDemo-iOS/Swift/Demos/，每个ViewController都是一个可运行的最小案例。🚀

【免费下载链接】ChartsBeautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.项目地址: https://gitcode.com/gh_mirrors/cha/Charts