Lightning Chart JS实时时序折线图：X轴时间戳与容器适配问题

一、X轴显示实际时间戳 #

当前代码通过data.x - timeBegin将X轴转为相对时间，要直接使用原始时间戳，只需调整数据添加逻辑并优化轴配置：

1. 修改数据接收逻辑
   直接传入原始data.x作为X值，无需减去应用加载时间：

socket.on('data', (data) => {
  console.log(data)
  series.add({ x: data.x, y: data.y })
})

2. 优化X轴配置
   LightningChart的AxisTickStrategies.Time默认支持毫秒级UNIX时间戳，若需保持实时滚动到最新数据，可添加滚动策略并设置初始显示范围：

const axisX = chart
  .getDefaultAxisX()
  .setTickStrategy(AxisTickStrategies.Time)
  // 自动滚动到最新数据
  .setScrollStrategy(AxisScrollStrategies.progressive)
  // 初始显示最近30秒数据
  .setInterval({
    start: new Date().getTime() - DEFAULT_X_RANGE_MS,
    end: new Date().getTime()
  })

修改后tooltip会自动解析时间戳为带毫秒的格式，无需额外转换。

二、图表适配React-Bootstrap Container容器 #

图表占满屏幕是因为未正确绑定容器尺寸，需从以下几点调整：

1. 给容器设置明确尺寸
   在CSS中定义.chart类的宽高，确保父容器有可参考的尺寸：

.chart {
  width: 100%;
  height: 600px; /* 可根据需求调整高度 */
}

2. 创建图表时指定容器
   创建ChartXY时通过container参数绑定到目标div的ID，限制图表渲染范围：

const chart = lightningChart()
  .ChartXY({
    theme: Themes.light,
    container: id // 对应组件返回的div的id属性
  })
  .setTitle('Custom X ticks with scrolling Axis')

3. 启用自动适配容器大小
   添加自动尺寸适配，确保图表随容器大小变化而调整：

chart.setAutoSize(true)

修改后的完整关键代码片段 #

import {
  lightningChart, AxisScrollStrategies, AxisTickStrategies, Themes, PointShape
} from '@arction/lcjs'
import React, { useRef, useEffect } from 'react'
import { io } from 'socket.io-client'

const Chart = ({ data, id }) => {
  const chartRef = useRef(undefined)
  const DEFAULT_X_RANGE_MS = 30 * 1000; // 30 seconds

  useEffect(() => {
    console.log('create chart')

    const chart = lightningChart()
      .ChartXY({
        theme: Themes.light,
        container: id // 指定渲染容器
      })
      .setTitle('Custom X ticks with scrolling Axis')
      .setAutoSize(true) // 自动适配容器大小

    const series = chart.addPointLineSeries({
      pointShape: PointShape.Circle,
    })
      .setDataCleaning({ minDataPointCount: 120000 })
      .setPointSize(10)

    const axisX = chart
      .getDefaultAxisX()
      .setTickStrategy(AxisTickStrategies.Time)
      .setScrollStrategy(AxisScrollStrategies.progressive)
      .setInterval({
        start: new Date().getTime() - DEFAULT_X_RANGE_MS,
        end: new Date().getTime()
      })

    chart.getDefaultAxisY().setTitle('Y Axis')

    chart.setAutoCursor((cursor) =>
      cursor.setResultTableAutoTextStyle(true).setTickMarkerXAutoTextStyle(true).setTickMarkerYAutoTextStyle(true),
    )

    chartRef.current = { chart, series }

    return () => {
      console.log('destroy chart')
      chart.dispose()
      chartRef.current = undefined
    }
  }, [id])


  useEffect(() => {
    const components = chartRef.current
    if (!components) return

    const { series } = components
    console.log('set chart data', data)
    const socket = io('http://localhost:8080')

    socket.on('data', (data) => {
      console.log(data)
      series.add({ x: data.x, y: data.y }) // 直接使用原始时间戳
    })

  }, [data, chartRef])

  return <div id={id} className='chart'></div>
}

export default Chart

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