如何使用Charts库实现折线图仅在用户触摸点位时显示数值？

实现方案 #

要实现触摸折线点位弹出对应数值的效果，按以下步骤修改代码即可：

1. 绑定图表代理、开启交互支持
   首先让当前控制器遵守ChartViewDelegate协议，同时给折线图开启高亮交互：

// 控制器类声明处添加协议遵守
class YourViewController: UIViewController, ChartViewDelegate {
    // 折线图初始化时设置代理
    lineChartView.delegate = self
    // 开启点击、拖动选中点位的能力
    lineChartView.highlightPerTapEnabled = true
    lineChartView.highlightPerDragEnabled = true
}

2. 调整数据集的高亮配置
   在你原有的折线数据集配置代码中补充高亮相关属性：

let set1 = LineChartDataSet(entries: yValues, label: "Subscribers")
set1.drawCirclesEnabled = false
set1.mode = .cubicBezier
set1.lineWidth = 4
set1.setColor(#colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1))
set1.drawHorizontalHighlightIndicatorEnabled = false
// 补充高亮配置：可根据需求选择是否保留垂直高亮线
set1.drawVerticalHighlightIndicatorEnabled = true
set1.highlightColor = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1)
set1.highlightLineWidth = 1.5
set1.drawValuesEnabled = true
set1.valueTextColor = .systemGray

let data = LineChartData(dataSet: set1)
data.setDrawValues(false)

lineChartView.data = data

3. 配置数值弹出标记
   Charts库自带气泡样式的标记组件BalloonMarker，直接配置即可实现你需要的弹窗效果，在给图表赋值data之前添加如下代码：

// 初始化气泡标记，配色和折线统一
let marker = BalloonMarker(color: #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1),
                           font: .systemFont(ofSize: 12, weight: .medium),
                           textColor: .white,
                           insets: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8))
// 设置显示的数值格式
marker.setLabel { entry in
    return String(format: "%.1f", entry.y)
}
marker.minimumSize = CGSize(width: 40, height: 30)
// 将标记绑定到折线图
lineChartView.marker = marker

修改完成后运行项目，点击或拖动折线点位即可弹出对应数值气泡，符合你给出的参考效果。

内容的提问来源于stack exchange，提问作者As If Prince