DGCharts LineChart完整教程从基础折线图到渐变填充与贝塞尔曲线【免费下载链接】ChartsBeautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.项目地址: https://gitcode.com/gh_mirrors/cha/ChartsDGCharts原名 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 dataLineChartView继承自BarLineChartViewBase内部使用专门的渲染器完成绘制定义见 LineChartView.swift。二、折线与数据点圆圈常用样式速查LineChartDataSet暴露了大量开箱即用的属性下表是最常用的几个属性默认值作用lineWidth1折线粗细0–10circleRadius8数据点圆圈半径circleHoleRadius4圆圈中心孔的半径drawCirclesEnabledtrue是否显示数据点圆圈drawFilledEnabledfalse是否填充折线下方区域lineDashLengthsnil虚线样式如[5, 2.5]mode.linear曲线模式见第四节想要空心小圆点这种精致风格只需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。真正的渐变色填充LinearGradientFillfillColor只能填纯色想要蓝→紫这种渐变需要用到fill属性配合LinearGradientFilllet 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 trueFill协议内置了四种填充器全部定义在 Fill.swiftColorFill—— 纯色填充LinearGradientFill—— 线性渐变最常用RadialGradientFill—— 径向渐变ImageFill—— 用图片填充支持平铺Demo 中透明蓝→红色的渐变填充写法见 LineChart1ViewController.swift。四、贝塞尔曲线一键平滑折线默认的mode .linear画出来是折线段。DGCharts 提供四种曲线模式定义见 LineChartDataSet.swift#L18-L25模式效果.linear直线段默认.cubicBezier三次贝塞尔曲线完全平滑.horizontalBezier水平贝塞尔曲线仅在水平方向平滑.stepped阶梯状折线适合阶跃型数据平滑曲线只需一行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。六、新手常见问题FAQQ1数据更新了但图表没变化赋值给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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考