如何在Charts库折线图的无数据X轴区域添加间隔/断点

API 探路者

2026-7-17

在Charts折线图中添加数据间隔/断点的实现方案

核心实现思路

Charts库本身支持通过两种简单方式实现折线断点，适配不同的数据场景：

方案1：用空值占位自动断开折线

如果你的X轴是连续序列（比如时间、递增数字），对应无数据的位置直接插入Double.nan（iOS/macOS）或Float.NaN（Android）作为Y值，Charts会自动在该位置断开折线：

// iOS示例：构建带空值的数据集
let dataEntries = [
    ChartDataEntry(x: 0, y: 23),
    ChartDataEntry(x: 1, y: Double.nan), // 此处无数据，折线自动断开
    ChartDataEntry(x: 2, y: 31),
    ChartDataEntry(x: 3, y: Double.nan),
    ChartDataEntry(x: 4, y: 19)
]
let dataSet = LineChartDataSet(entries: dataEntries, label: "业务数据")
let chartData = LineChartData(dataSet: dataSet)
lineChartView.data = chartData

注意：如果需要隐藏空值位置的圆点，可设置dataSet.drawCirclesEnabled = false

方案2：拆分数据集实现断点

如果X轴是离散分类数据，或者需要精准控制断点范围，可将连续数据拆分成多个LineChartDataSet，每个数据集对应一段连续折线，中间自然形成间隔：

// iOS示例：拆分数据集实现断点
// 第一段连续数据
let segment1Entries = [ChartDataEntry(x: 0, y: 23), ChartDataEntry(x: 1, y: 27)]
let segment1Set = LineChartDataSet(entries: segment1Entries, label: "业务数据")
segment1Set.setColor(.systemBlue)

// 跳过X=2，直接设置第二段数据
let segment2Entries = [ChartDataEntry(x: 3, y: 31), ChartDataEntry(x: 4, y: 19)]
let segment2Set = LineChartDataSet(entries: segment2Entries, label: "业务数据")
segment2Set.setColor(.systemBlue) // 用相同颜色保持视觉连贯

let chartData = LineChartData(dataSets: [segment1Set, segment2Set])
lineChartView.data = chartData