Overview

常见图表类型#

以下是基于 Swift Charts（Charts 库）支持的常见图表类型及其核心配置的整理表格，结合官方文档与搜索结果中的案例，供快速参考：

Swift Charts 图表类型与配置速查表#

图表类型描述核心类常用配置项示例代码参考
折线图用于展示数据趋势变化，支持平滑曲线、虚线、填充色等。LineChartViewLineChartDataSet：colors（颜色）、lineWidth（线宽）、mode（曲线模式）、drawCirclesEnabled（显示拐点）
ChartDataEntry：数据点坐标		[网页1][网页5][网页6]
柱状图展示分类数据对比，支持垂直/水平、分组/堆积柱形。BarChartViewBarChartDataSet：colors（颜色数组）、stackLabels（堆积标签）、barWidth（柱宽）
BarChartData：多数据集组合		[网页3][网页4][网页7]
饼图/环形图展示数据占比，支持空心设计、标签外引线、动画旋转。PieChartViewPieChartDataSet：sliceSpace（区块间隙）、valueLinePart1Length（引线长度）
holeRadiusPercent（空心比例）		[网页2][网页4]
K线图用于金融数据，显示开盘价、收盘价、最高价、最低价。CandleStickChartViewCandleChartDataSet：shadowColor（影线颜色）、decreasingColor（跌色）、increasingColor（涨色）[网页4]
雷达图展示多维数据对比，常用于能力评估。RadarChartViewwebLineWidth（网格线宽）、innerWebColor（内网颜色）、yAxis.axisMaximum（最大值设定）[网页4]
散点图展示数据分布，支持自定义点形状与颜色。ScatterChartViewScatterChartDataSet：scatterShape（形状：圆形、方形等）、scatterShapeSize（点大小）[网页8]
气泡图通过气泡大小表示第三维度数据。BubbleChartViewBubbleChartDataSet：size（气泡大小）、normalizeSizeEnabled（标准化尺寸）[网页8]
面积图折线图填充背景色，强调数据总量或区间。LineChartViewdrawFilledEnabled（启用填充）、fillColor（填充色）、fillAlpha（透明度）[网页6]
组合图表在同一视图中叠加多种图表（如折线+柱状）。自定义 CombinedChartViewCombinedChartData：分别设置线、柱等子数据集，通过 drawOrder 控制绘制顺序[网页4][网页8]

关键配置项详解#

  1. 通用配置

    • 坐标轴：通过 xAxis/leftAxis 设置标签位置、刻度间隔、网格线样式（如虚线 gridLineDashLengths）。
    • 动画：使用 animate(xAxisDuration:yAxisDuration:) 添加入场动画。
    • 交互：启用缩放 (scaleXEnabled)、拖拽 (dragEnabled)，或通过 ChartViewDelegate 实现点击回调。

  2. 样式定制

    • 颜色模板：直接使用 ChartColorTemplates.liberty() 等预设颜色，或自定义数组。
    • 文字格式：通过 valueFormatter 设置数值显示格式（如百分比、货币符号）。
    • 高亮效果：修改十字线颜色 (highlightColor)、线宽 (highlightLineWidth)，或禁用高亮。

  3. 高级特性

    • 限制线：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]的层架构设计）。

通过上述表格与配置项，可快速实现多样化的数据可视化需求。具体实现细节可参考对应引用中的代码示例。

本文共 1639 字
Backward StoreView 核心概念 Forward