Swift Charts

常见图表类型 #

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


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

图表类型描述核心类常用配置项示例代码参考
折线图用于展示数据趋势变化,支持平滑曲线、虚线、填充色等。LineChartViewLineChartDataSetcolors(颜色)、lineWidth(线宽)、mode(曲线模式)、drawCirclesEnabled(显示拐点)
ChartDataEntry:数据点坐标
[网页1][网页5][网页6]
柱状图展示分类数据对比,支持垂直/水平、分组/堆积柱形。BarChartViewBarChartDataSetcolors(颜色数组)、stackLabels(堆积标签)、barWidth(柱宽)
BarChartData:多数据集组合
[网页3][网页4][网页7]
饼图/环形图展示数据占比,支持空心设计、标签外引线、动画旋转。PieChartViewPieChartDataSetsliceSpace(区块间隙)、valueLinePart1Length(引线长度)
holeRadiusPercent(空心比例)
[网页2][网页4]
K线图用于金融数据,显示开盘价、收盘价、最高价、最低价。CandleStickChartViewCandleChartDataSetshadowColor(影线颜色)、decreasingColor(跌色)、increasingColor(涨色)[网页4]
雷达图展示多维数据对比,常用于能力评估。RadarChartViewwebLineWidth(网格线宽)、innerWebColor(内网颜色)、yAxis.axisMaximum(最大值设定)[网页4]
散点图展示数据分布,支持自定义点形状与颜色。ScatterChartViewScatterChartDataSetscatterShape(形状:圆形、方形等)、scatterShapeSize(点大小)[网页8]
气泡图通过气泡大小表示第三维度数据。BubbleChartViewBubbleChartDataSetsize(气泡大小)、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]的层架构设计)。

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