Text Matrix
技术笔记 行业快讯 视频精读 财富自由 思考与随笔 搜索
Text Matrix

目录

Lightweight Charts™：14.9K Stars·TradingView开源轻量级金融图表库

 收录于 技术笔记
   约 8784 字   预计阅读 22 分钟 

Lightweight Charts™：14.9K Stars·TradingView开源轻量级金融图表库

学习目标

  • 理解 Lightweight Charts 的核心特点和技术优势
  • 掌握在网页中集成轻量级图表的方法
  • 学会配置不同类型的图表（K线、折线、柱状图等）
  • 掌握图表样式定制和数据更新
  • 了解插件系统和扩展开发
  • 学会性能优化和最佳实践

项目概述

Lightweight Charts™ 是由 TradingView 开发的开源轻量级金融图表库，专门为网页端的金融数据可视化而设计。它是同类中最小且最快的 HTML5 金融图表解决方案之一，核心优势在于极小的包体积和卓越的渲染性能。

该库特别适合以下场景：需要展示金融数据的交互式图表但又不想影响网页加载速度和性能；希望用交互式图表替代静态图片图表；需要在网页上展示大量图表但又想控制页面大小。与同等规模的静态图片相比，Lightweight Charts 能够显著减少网页的总体积。

项目由 TradingView 官方维护，采用 Apache-2.0 开源许可证，拥有活跃的社区支持和持续的版本更新。最新版本 v5.1.0 于 2025 年 12 月发布，带来了多项性能优化和新功能。

核心架构

设计理念

Lightweight Charts 的设计理念是"轻量而不简陋"。虽然包体积接近静态图片，但它提供了丰富的图表功能，包括多种图表类型、技术指标支持、实时数据更新等。核心使用 HTML5 Canvas 进行渲染，确保在各种设备上都能获得流畅的图表体验。

库的整体架构分为两个主要部分：核心渲染引擎和 API 层。渲染引擎负责与浏览器 Canvas API 交互，处理所有的绘图操作；API 层则提供友好的接口供开发者配置图表行为和交互。

技术栈

Lightweight Charts 主要使用 TypeScript 开发，辅以 JavaScript 进行部分功能实现。项目源码目录结构如下：

  • src/：核心源代码
  • tests/：测试文件
  • debug/：调试工具
  • website/：官方文档网站
  • indicator-examples/：技术指标示例
  • plugin-examples/：插件示例
  • packages/create-lwc-plugin/：插件创建脚手架

技术选型方面，项目使用 Rollup 进行打包，支持多种构建变体以满足不同使用场景的需求。

快速上手

安装方式

Lightweight Charts 支持多种安装方式，最常用的是通过 npm 安装：

npm install lightweight-charts

如果想尝试最新的 master 分支版本（未正式发布），可以使用 pkg.pr.new：

npm install https://pkg.pr.new/lightweight-charts@master

对于不想使用构建工具的场景，也可以通过 CDN 直接引入：

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

基础使用

使用 npm 模块的方式：

import { createChart, LineSeries } from 'lightweight-charts';

// 创建图表
const chart = createChart(document.body, { width: 400, height: 300 });

// 添加折线系列
const lineSeries = chart.addSeries(LineSeries);

// 设置数据
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
]);

使用 CDN 引入的方式：

const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addSeries(LightweightCharts.LineSeries);
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
]);

图表配置

创建图表时可以传入丰富的配置选项：

const chart = createChart(document.body, {
    width: 800,           // 图表宽度
    height: 400,          // 图表高度
    layout: {
        background: { color: '#ffffff' },  // 背景色
        textColor: '#333333',             // 文字颜色
    },
    grid: {
        vertLines: { color: '#e0e0e0' },  // 垂直网格线
        horzLines: { color: '#e0e0e0' },  // 水平网格线
    },
    crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
    },
    rightPriceScale: {
        borderColor: '#d1d1d1',
    },
    timeScale: {
        borderColor: '#d1d1d1',
        timeVisible: true,
        secondsVisible: false,
    },
});

图表类型详解

折线图（LineSeries）

折线图是最基础的图表类型，适合展示价格的总体趋势：

const lineSeries = chart.addSeries(LineSeries, {
    color: '#2962FF',     // 线条颜色
    lineWidth: 2,         // 线条宽度
    crosshairMarkerVisible: true,  // 显示十字线标记
});

lineSeries.setData([
    { time: '2023-01-01', value: 100 },
    { time: '2023-01-02', value: 105 },
    { time: '2023-01-03', value: 102 },
]);

K线图（CandlestickSeries）

K线图是金融领域最常用的图表类型，能够同时展示开盘价、收盘价、最高价和最低价：

const candlestickSeries = chart.addSeries(CandlestickSeries, {
    upColor: '#26a69a',           // 上涨颜色
    downColor: '#ef5350',         // 下跌颜色
    borderUpColor: '#26a69a',    // 上涨边框色
    borderDownColor: '#ef5350',   // 下跌边框色
    wickUpColor: '#26a69a',      // 上涨影线色
    wickDownColor: '#ef5350',    // 下跌影线色
});

candlestickSeries.setData([
    {
        time: '2023-01-01',
        open: 100,
        high: 105,
        low: 98,
        close: 103,
    },
    {
        time: '2023-01-02',
        open: 103,
        high: 108,
        low: 101,
        close: 106,
    },
]);

柱状图（HistogramSeries）

柱状图适合展示成交量或MACD等指标：

const histogramSeries = chart.addSeries(HistogramSeries, {
    color: '#26a69a',            // 柱状颜色
    priceFormat: {
        type: 'volume',          // 价格格式类型
    },
    priceScaleId: 'volume',     // 价格轴ID
});

// 设置价格轴位置
chart.priceScale('volume').applyOptions({
    scaleMargins: {
        top: 0.8,
        bottom: 0,
    },
});

histogramSeries.setData([
    { time: '2023-01-01', value: 1000000, color: '#26a69a' },
    { time: '2023-01-02', value: 1200000, color: '#ef5350' },
]);

面积图（AreaSeries）

面积图是折线图的变体，在折线和数据之间填充颜色：

const areaSeries = chart.addSeries(AreaSeries, {
    topColor: 'rgba(41, 98, 255, 0.28)',    // 顶部填充色
    bottomColor: 'rgba(41, 98, 255, 0.05)',  // 底部填充色
    lineColor: '#2962FF',                    // 线条颜色
    lineWidth: 2,                            // 线条宽度
});

areaSeries.setData([
    { time: '2023-01-01', value: 100 },
    { time: '2023-01-02', value: 105 },
    { time: '2023-01-03', value: 102 },
]);

数据管理

时间数据

Lightweight Charts 对时间数据有严格的要求。数据必须按时间顺序排列，且时间格式需要符合库的要求：

// ISO 8601 格式（推荐）
{ time: '2023-01-01' }

// 带时间的格式
{ time: '2023-01-01T09:30:00' }

// 时间戳格式（需要设置时间尺度类型）
{ time: 1672531200 }

实时更新

对于需要实时更新的场景，可以使用 update 方法：

// 初始数据
lineSeries.setData([
    { time: '2023-01-01', value: 100 },
    { time: '2023-01-02', value: 105 },
]);

// 实时更新最后一条数据
lineSeries.update({
    time: '2023-01-02',
    value: 108,  // 更新为新值
});

// 添加新数据
lineSeries.update({
    time: '2023-01-03',
    value: 110,
});

数据切片

当数据量较大时，可以使用数据切片功能只渲染可见范围的数据：

chart.timeScale().setVisibleRange({
    from: '2023-01-01',
    to: '2023-01-31',
});

交互功能

十字线

十字线帮助用户精确定位数据点：

// 默认十字线配置
const crosshairOptions = {
    mode: LightweightCharts.CrosshairMode.Normal,  // 普通模式
    // CrosshairMode.Magnet - 磁吸模式，跟随价格线
};

// 应用配置
chart.applyOptions({ crosshair: crosshairOptions });

价格/时间标记

通过 API 可以添加自定义的价格线和时间标记：

// 添加价格线
const priceLine = lineSeries.createPriceLine({
    price: 100,
    color: '#b71c1c',
    lineWidth: 1,
    lineStyle: LightweightCharts.LineStyle.Dashed,
    axisLabelVisible: true,
    title: '支撑位',
});

// 添加时间线
const timeLine = chart.createTimeLine({
    time: '2023-01-01',
    color: '#2196F3',
    lineWidth: 1,
    lineStyle: LightweightCharts.LineStyle.Dotted,
});

响应式调整

让图表自动适应容器大小变化：

// 开启自动尺寸调整
const chart = createChart(container, {
    autoSize: true,
});

// 或者手动处理容器大小变化
const resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
        const { width, height } = entry.contentRect;
        chart.resize(width, height);
    }
});
resizeObserver.observe(container);

插件系统

Lightweight Charts 提供了强大的插件系统，允许开发者扩展图表功能。官方提供了丰富的插件示例，可以访问 Plugin Examples 查看。

内置指标

库内置了多个常用技术指标：

import { createChart, CandlestickSeries, LineSeries } from 'lightweight-charts';
import { SMA, EMA, MACD, RSI } from 'lightweight-charts/indicators';

// 创建图表和K线数据
const chart = createChart(container);
const candlestickSeries = chart.addSeries(CandlestickSeries);
candlestickSeries.setData(candleData);

// 添加均线
const smaSeries = chart.addSeries(LineSeries, {
    color: '#FF9800',
    lineWidth: 2,
});
const smaIndicator = new SMA(14);
smaIndicator.subscribe(series => {
    smaSeries.setData(series.data);
});
smaIndicator.update(candleData);

// 添加RSI
const rsiIndicator = new RSI(14);
rsiIndicator.subscribe(series => {
    // RSI 数据更新
});

自定义插件

项目提供了脚手架工具帮助创建自定义插件：

npx create-lwc-plugin my-custom-indicator

插件开发需要遵循特定的接口规范，详细的开发指南可以参考项目源码中的 plugin-examples 目录。

样式定制

全局样式

通过 applyOptions 方法可以全局调整图表样式：

chart.applyOptions({
    layout: {
        background: { type: 'solid', color: '#1a1a1a' },
        textColor: '#d1d1d1',
        fontSize: 12,
        fontFamily: 'Roboto, Arial, sans-serif',
    },
    grid: {
        vertLines: { color: '#2a2a2a' },
        horzLines: { color: '#2a2a2a' },
    },
    crosshair: {
        vertLine: {
            color: '#5555',
            width: 1,
            style: 2, // Dashed
            labelBackgroundColor: '#2a2a2a',
        },
        horzLine: {
            color: '#5555',
            width: 1,
            style: 2,
            labelBackgroundColor: '#2a2a2a',
        },
    },
});

系列样式

每个数据系列都可以独立设置样式：

const series = chart.addSeries(CandlestickSeries, {
    // K线颜色
    upColor: '#26a69a',
    downColor: '#ef5350',
    borderUpColor: '#26a69a',
    borderDownColor: '#ef5350',
    wickUpColor: '#26a69a',
    wickDownColor: '#ef5350',
    
    // 标题显示
    title: 'AAPL',
});

// 更新样式
series.applyOptions({
    upColor: '#00C853',
    downColor: '#FF1744',
});

构建变体

Lightweight Charts 提供多种构建变体以适应不同使用场景：

依赖模式ES ModuleIIFE (window.LightweightCharts)
否PRODlightweight-charts.production.mjsN/A
否DEVlightweight-charts.development.mjsN/A
是PRODlightweight-charts.standalone.production.mjslightweight-charts.standalone.production.js
是DEVlightweight-charts.standalone.development.mjslightweight-charts.standalone.development.js

standalone 版本包含了所有依赖，适合直接通过 CDN 引入；非 standalone 版本需要项目本身已有 d3、moment 等依赖。

性能优化

数据点优化

对于大量数据的场景，建议：

  1. 使用适当的时间精度：不需要秒级数据时，使用日级或小时级数据
  2. 数据采样：对历史数据进行降采样处理
  3. 懒加载：只加载可见范围内的数据

渲染优化

  1. 关闭不必要的功能：不需要十字线时关闭，减少计算
  2. 使用 requestAnimationFrame：批量更新数据时使用 RAF 控制刷新频率
  3. 分离图表：多个图表使用独立的 chart 实例，避免相互影响
// 批量更新使用 RAF
function batchUpdate(chart, series, newData) {
    let index = 0;
    function updateNext() {
        if (index < newData.length) {
            series.update(newData[index]);
            index++;
            requestAnimationFrame(updateNext);
        }
    }
    updateNext();
}

许可与归属

Lightweight Charts 采用 Apache-2.0 开源许可证。使用时需要满足以下要求：

  1. 添加归属通知：在 NOTICE 文件中添加归属声明
  2. 添加链接：在网页或应用的显著位置添加 TradingView 链接
  3. Logo 使用：可以使用 attributionLogo 选项在图表上显示链接标志
chart.applyOptions({
    layout: {
        attributionLogo: true,
        attributionText: 'TradingView',
    },
});

社区资源

安装速查

# npm 安装
npm install lightweight-charts

# 尝试最新 master 版本
npm install https://pkg.pr.new/lightweight-charts@master

# CDN 引入
# https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js

参考链接

  • GitHub：https://github.com/tradingview/lightweight-charts
  • npm：https://www.npmjs.com/package/lightweight-charts
  • Demo：https://www.tradingview.com/lightweight-charts/
  • 文档：https://tradingview.github.io/lightweight-charts/
更新于 2026-05-23
 JavaScript, TypeScript, 金融, 图表, TradingView
返回 | 主页

下一步

如果这篇内容对你有帮助，继续往更完整的路径里走。

你可以从专题页继续系统阅读，也可以通过联系页反馈想跟进的主题、工具和合作方向。

AI Agent 专题 Coding Agent 专题 开源 AI 工具 联系

继续阅读

与这篇内容相关的文章