Lightweight Charts：如何制作带有图片的时间轴图表？

嘿，这个需求我刚好折腾过类似的！Lightweight Charts本身并没有自带「时间轴上添加图片」的现成功能，但我们可以用它的**自定义插件（Custom Plugin）**来实现——核心思路就是在图表的时间轴区域，根据时间戳计算出图片的画布坐标，然后用Canvas API绘制上去。下面是具体的实现步骤和可直接运行的代码示例：

1. 先搭好基础图表框架 #

首先初始化一个基础图表（这里用折线图举例，K线图/柱状图同理），确保图表能正常渲染：

<div id="chart-container" style="width: 800px; height: 400px;"></div>

// 初始化图表
const chart = LightweightCharts.createChart(document.getElementById('chart-container'), {
    timeScale: {
        timeVisible: true,
        secondsVisible: false,
    },
});

// 添加一个折线图系列作为基础展示
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2024-01-01', value: 30 },
    { time: '2024-01-02', value: 40 },
    { time: '2024-01-03', value: 35 },
    { time: '2024-01-04', value: 50 },
    { time: '2024-01-05', value: 45 },
]);

2. 准备图片数据与预加载图片 #

整理好需要显示的图片和对应的时间点，并且提前加载图片（避免绘制时图片未加载完成导致空白）：

// 时间轴图片数据：时间点 + 图片路径
const timelineImages = [
    { time: '2024-01-02', imgUrl: 'path/to/your/icon1.png' },
    { time: '2024-01-04', imgUrl: 'path/to/your/icon2.png' },
];

// 预加载所有图片
const loadedImages = [];
timelineImages.forEach(item => {
    const img = new Image();
    img.src = item.imgUrl;
    img.onload = () => {
        loadedImages.push({ ...item, img });
        // 图片加载完成后触发图表重绘
        chart.applyOptions({});
    };
});

3. 编写自定义插件实现图片绘制 #

自定义插件的核心是draw方法，在这里我们可以拿到图表的Canvas上下文，根据时间坐标转换来定位并绘制图片：

const timelineImagePlugin = {
    draw(ctx, chart) {
        const timeScale = chart.timeScale();
        const chartSize = chart.handleSize();
        // 图片在时间轴上的Y坐标（可根据需求调整，这里是图表底部往上20px）
        const timelineY = chartSize.height - 20;
        // 图片尺寸（自定义）
        const imgSize = 20;

        loadedImages.forEach(item => {
            // 将时间转换为画布上的X坐标
            const x = timeScale.timeToCoordinate(item.time);
            // 如果该时间不在当前视图范围内，跳过绘制
            if (x === undefined) return;

            // 绘制图片，让图片中心对齐时间点
            ctx.drawImage(
                item.img,
                x - imgSize / 2,
                timelineY - imgSize / 2,
                imgSize,
                imgSize
            );
        });
    },
};

4. 挂载插件到图表 #

最后把我们写的插件添加到图表中，就能看到时间轴上的图片了：

chart.addPlugin(timelineImagePlugin);

• 图片路径要确保正确：本地图片注意相对路径，网络图片要确认跨域权限没问题；
• 样式自定义：可以通过调整imgSize和timelineY来适配你的时间轴样式；
• 交互扩展：如果需要给图片加点击事件，可以在插件里添加handleMouseEvent方法，判断鼠标点击位置是否落在图片范围内；
• 性能优化：当有大量图片时，建议先用timeScale.getVisibleRange()过滤掉当前视图外的图片，减少绘制压力；
• 自定义时间轴高度：如果你的时间轴高度是自定义的，可以用chart.timeScale().height()获取实际高度，再调整图片的Y坐标。

内容的提问来源于stack exchange，提问作者kern