常见图表类型 #
以下是基于 Swift Charts(Charts 库)支持的常见图表类型及其核心配置的整理表格,结合官方文档与搜索结果中的案例,供快速参考:
Swift Charts 图表类型与配置速查表 #
图表类型 | 描述 | 核心类 | 常用配置项 | 示例代码参考 |
---|---|---|---|---|
折线图 | 用于展示数据趋势变化,支持平滑曲线、虚线、填充色等。 | LineChartView | LineChartDataSet :colors (颜色)、lineWidth (线宽)、mode (曲线模式)、drawCirclesEnabled (显示拐点)ChartDataEntry :数据点坐标 | [网页1][网页5][网页6] |
柱状图 | 展示分类数据对比,支持垂直/水平、分组/堆积柱形。 | BarChartView | BarChartDataSet :colors (颜色数组)、stackLabels (堆积标签)、barWidth (柱宽)BarChartData :多数据集组合 | [网页3][网页4][网页7] |
饼图/环形图 | 展示数据占比,支持空心设计、标签外引线、动画旋转。 | PieChartView | PieChartDataSet :sliceSpace (区块间隙)、valueLinePart1Length (引线长度)holeRadiusPercent (空心比例) | [网页2][网页4] |
K线图 | 用于金融数据,显示开盘价、收盘价、最高价、最低价。 | CandleStickChartView | CandleChartDataSet :shadowColor (影线颜色)、decreasingColor (跌色)、increasingColor (涨色) | [网页4] |
雷达图 | 展示多维数据对比,常用于能力评估。 | RadarChartView | webLineWidth (网格线宽)、innerWebColor (内网颜色)、yAxis.axisMaximum (最大值设定) | [网页4] |
散点图 | 展示数据分布,支持自定义点形状与颜色。 | ScatterChartView | ScatterChartDataSet :scatterShape (形状:圆形、方形等)、scatterShapeSize (点大小) | [网页8] |
气泡图 | 通过气泡大小表示第三维度数据。 | BubbleChartView | BubbleChartDataSet :size (气泡大小)、normalizeSizeEnabled (标准化尺寸) | [网页8] |
面积图 | 折线图填充背景色,强调数据总量或区间。 | LineChartView | drawFilledEnabled (启用填充)、fillColor (填充色)、fillAlpha (透明度) | [网页6] |
组合图表 | 在同一视图中叠加多种图表(如折线+柱状)。 | 自定义 CombinedChartView | CombinedChartData :分别设置线、柱等子数据集,通过 drawOrder 控制绘制顺序 | [网页4][网页8] |
关键配置项详解 #
通用配置
- 坐标轴:通过
xAxis
/leftAxis
设置标签位置、刻度间隔、网格线样式(如虚线gridLineDashLengths
)。 - 动画:使用
animate(xAxisDuration:yAxisDuration:)
添加入场动画。 - 交互:启用缩放 (
scaleXEnabled
)、拖拽 (dragEnabled
),或通过ChartViewDelegate
实现点击回调。
- 坐标轴:通过
样式定制
- 颜色模板:直接使用
ChartColorTemplates.liberty()
等预设颜色,或自定义数组。 - 文字格式:通过
valueFormatter
设置数值显示格式(如百分比、货币符号)。 - 高亮效果:修改十字线颜色 (
highlightColor
)、线宽 (highlightLineWidth
),或禁用高亮。
- 颜色模板:直接使用
高级特性
- 限制线:
ChartLimitLine
标记阈值,支持动态添加。 - 图例:调整位置 (
legend.horizontalAlignment
)、形状 (legend.form
) 及字体。 - 渐变色填充:使用
CGGradient
实现面积图渐变效果(见[网页6])。
- 限制线:
示例代码片段 #
折线图平滑曲线与填充色
let dataSet = LineChartDataSet(values: entries, label: "销量")
dataSet.mode = .cubicBezier // 贝塞尔曲线
dataSet.drawFilledEnabled = true
dataSet.fill = Fill.fillWithColor(.systemBlue.withAlphaComponent(0.2)) // 半透明填充
chartView.data = LineChartData(dataSet: dataSet)
分组柱状图
let groupSpace = 0.3 // 组间间隔
let barSpace = 0.05 // 柱间间隔
let barWidth = 0.3 // 单柱宽度
data.barWidth = barWidth
data.groupBars(fromX: 0, groupSpace: groupSpace, barSpace: barSpace) // 按组排列
饼图外引标签
dataSet.yValuePosition = .outsideSlice // 数值显示在外部
dataSet.valueLinePart1Length = 0.4 // 引线第一段长度
dataSet.valueLineColor = .gray // 引线颜色
扩展资源 #
- 官方文档:Charts 的 GitHub 仓库提供完整 API 说明与示例 GitHub。
- 高级图表:如热力图、瀑布图需结合自定义渲染(参考[网页8]的层架构设计)。
通过上述表格与配置项,可快速实现多样化的数据可视化需求。具体实现细节可参考对应引用中的代码示例。