TradingView Lightweight Charts iOS 集成指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00034/article/details/148393760

TradingView Lightweight Charts iOS 集成指南

lightweight-charts Performant financial charts built with HTML5 canvas 项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts

前言

TradingView Lightweight Charts 是一款轻量级、高性能的金融图表库，专为需要展示金融数据的应用场景设计。本文将详细介绍如何在 iOS 应用中集成和使用这个强大的图表库。

iOS 集成概述

Lightweight Charts 提供了专门的 iOS 封装库，让开发者可以在原生 iOS 应用中轻松使用这个基于 Web 技术的图表库。封装库内部使用 WebView 来渲染图表，同时提供了原生 Swift API 来与图表交互。

环境要求

iOS 10.0 或更高版本
Xcode 开发环境

安装方式

1. 使用 CocoaPods 安装

CocoaPods 是 iOS 开发中最常用的依赖管理工具之一。

确保已安装 CocoaPods
在项目根目录的 Podfile 中添加以下内容：

pod 'LightweightCharts', '~> 3.8.0'

运行 pod install 命令安装依赖

2. 使用 Swift Package Manager 安装

Swift Package Manager 是苹果官方提供的依赖管理工具。

在 Xcode 中打开项目
选择 File > Swift Packages > Add Package Dependency
输入封装库的地址
选择版本规则（建议选择 Up to Next Major 并指定 4.0.0）

基础使用教程

1. 初始化图表

首先在需要使用图表的文件中导入库：

import LightweightCharts

然后创建图表实例并添加到视图层级中：

var chart: LightweightCharts!

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 创建图表实例
    chart = LightweightCharts()
    
    // 添加图表到视图
    view.addSubview(chart)
    
    // 设置布局约束（示例使用AutoLayout）
    chart.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        chart.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        chart.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        chart.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        chart.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5)
    ])
}

2. 添加数据系列

Lightweight Charts 支持多种数据系列类型，这里以柱状图为例：

var series: BarSeries!

override func viewDidLoad() {
    super.viewDidLoad()
    // ... 初始化图表代码
    
    // 添加柱状图系列
    series = chart.addBarSeries(options: nil)
}

3. 设置图表数据

为图表系列添加数据：

let sampleData = [
    BarData(time: .string("2018-10-19"), open: 180.34, high: 180.99, low: 178.57, close: 179.85),
    BarData(time: .string("2018-10-22"), open: 180.82, high: 181.40, low: 177.56, close: 178.75),
    BarData(time: .string("2018-10-23"), open: 175.77, high: 179.49, low: 175.44, close: 178.53),
    BarData(time: .string("2018-10-24"), open: 178.58, high: 182.37, low: 176.31, close: 176.97),
    BarData(time: .string("2018-10-25"), open: 177.52, high: 180.50, low: 176.83, close: 179.07)
]

series.setData(data: sampleData)

高级功能

1. 图表配置选项

创建图表时可以传入各种配置选项：

let options = ChartOptions(
    layout: LayoutOptions(
        backgroundColor: "#ffffff",
        textColor: "#333333"
    ),
    rightPriceScale: VisiblePriceScaleOptions(
        borderVisible: false
    ),
    timeScale: TimeScaleOptions(
        borderVisible: false
    )
)

chart = LightweightCharts(options: options)

2. 添加多种系列类型

可以在同一图表中添加多种类型的系列：

let lineSeries = chart.addLineSeries(options: nil)
let areaSeries = chart.addAreaSeries(options: nil)

3. 实时更新数据

// 添加新数据点
let newDataPoint = BarData(time: .string("2018-10-26"), open: 179.50, high: 181.20, low: 178.30, close: 180.10)
series.update(bar: newDataPoint)

// 或者批量更新
let newDataPoints = [
    BarData(time: .string("2018-10-26"), open: 179.50, high: 181.20, low: 178.30, close: 180.10),
    BarData(time: .string("2018-10-29"), open: 180.30, high: 182.50, low: 179.80, close: 181.20)
]
series.setData(data: newDataPoints)