Angular 13.2中TradingView Lightweight Charts 5分钟蜡烛图显示异常

我使用Angular 13.2搭配TradingView Lightweight Charts 3.8.0，想要绘制5分钟级别的蜡烛图数据，但图表仅显示单个时间区间（2018年6月25日00:00:00），所有数据都堆叠在该区间内。安装命令为npm install --save lightweight-charts --legacy-peer-deps，复现代码如下：

import { createChart } from 'lightweight-charts';
const chart = createChart('tv_test', {
      width: 1200,
      height: 600,
      timeScale: {
        visible: true,
        timeVisible: true,
        secondsVisible: true,
    },
});

const candlestickSeries = chart.addCandlestickSeries();

candlestickSeries.setData([
  { time: '2018-06-25T09:15:00.000Z', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
  { time: '2018-06-25T09:20:00.000Z', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
  { time: '2018-06-25T09:25:00.000Z', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
  { time: '2018-06-25T09:30:00.000Z', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
  { time: '2018-06-25T09:35:00.000Z', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
  { time: '2018-06-25T09:40:00.000Z', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
  { time: '2018-06-25T09:45:00.000Z', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
  { time: '2018-06-25T09:50:00.000Z', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
  { time: '2018-06-25T09:55:00.000Z', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
  { time: '2018-06-25T10:00:00.000Z', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

chart.timeScale().fitContent();

问题截图：

问题原因 #

Angular环境下Zone.js对时间解析的影响，导致Lightweight Charts无法正确识别ISO格式的时间字符串，所有数据的时间被统一解析为当日00:00:00，最终堆叠显示。

解决方案 #

将时间字符串转换为秒级Unix时间戳传入，这是Lightweight Charts最稳定的时间格式：

修改后的代码示例：

import { createChart } from 'lightweight-charts';
const chart = createChart('tv_test', {
      width: 1200,
      height: 600,
      timeScale: {
        visible: true,
        timeVisible: true,
        secondsVisible: true,
    },
});

const candlestickSeries = chart.addCandlestickSeries();

// 将ISO时间转换为秒级时间戳
candlestickSeries.setData([
  { time: Math.floor(new Date('2018-06-25T09:15:00.000Z').getTime() / 1000), open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
  { time: Math.floor(new Date('2018-06-25T09:20:00.000Z').getTime() / 1000), open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
  { time: Math.floor(new Date('2018-06-25T09:25:00.000Z').getTime() / 1000), open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
  { time: Math.floor(new Date('2018-06-25T09:30:00.000Z').getTime() / 1000), open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
  { time: Math.floor(new Date('2018-06-25T09:35:00.000Z').getTime() / 1000), open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
  { time: Math.floor(new Date('2018-06-25T09:40:00.000Z').getTime() / 1000), open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
  { time: Math.floor(new Date('2018-06-25T09:45:00.000Z').getTime() / 1000), open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
  { time: Math.floor(new Date('2018-06-25T09:50:00.000Z').getTime() / 1000), open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
  { time: Math.floor(new Date('2018-06-25T09:55:00.000Z').getTime() / 1000), open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
  { time: Math.floor(new Date('2018-06-25T10:00:00.000Z').getTime() / 1000), open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

chart.timeScale().fitContent();

补充说明 #

• Lightweight Charts支持多种时间格式，但在Angular环境中，秒级时间戳是兼容性最好的选择，可避免Zone.js带来的时间解析异常。
• 转换时需将Date.getTime()返回的毫秒时间戳除以1000，得到秒级时间戳后传入。

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