使用轻量级图表库绘制一日面积图

Question

我正在尝试使用 lightweight-charts 为自动收报机绘制股票价格数据。我可以以预期的方式使用它来绘制间隔时间为 1w、1 个月或 3 个月等的图表。但未绘制图表正如预期的一日数据。

这是我的部分代码：


useEffect(() => {
  const chart = createChart(ref.current, {
    lineVisible: false,
    width: 400,
    height: 200,
    layout: {
      background: { color: "#26273000" },
      textColor: "rgba(255, 255, 255, 0.9)",
    },
    leftPriceScale: {
      borderVisible: false,
      autoScale: true,
    },
    rightPriceScale: {
      borderVisible: false,
      autoScale: true,
    },

    grid: {
      horzLines: {
        visible: false,
      },
      vertLines: {
        visible: false,
      },
    },
    crosshair: {
      mode: CrosshairMode.Magnet,
    },

    timeScale: {
      minBarSpacing: 0.001,
      borderVisible: false,
      fixLeftEdge: true,
      fixRightEdge: true,
    },
    priceScale: {
      fixLeftEdge: true,
      fixRightEdge: true,
      minBarSpacing: 0.001,
    },
    localization: {
      priceFormatter: (price) => {
        return parseInt(price);
      },
    },
  });
  const areaSeries = chart.addAreaSeries();
  const data = [
    { time: "2022-03-21T09:15:00", value: 502 },
    { time: "2022-03-21T09:30:00", value: 498.1 },
    { time: "2022-03-21T09:45:00", value: 495.6 },
    { time: "2022-03-21T10:00:00", value: 495.35 },
    { time: "2022-03-21T10:15:00", value: 495.6 },
    { time: "2022-03-21T10:30:00", value: 495.7 },
    { time: "2022-03-21T10:45:00", value: 495.5 },
    { time: "2022-03-21T11:00:00", value: 495.7 },
    { time: "2022-03-21T11:15:00", value: 495.5 },
    { time: "2022-03-21T11:30:00", value: 495.65 },
    { time: "2022-03-21T11:45:00", value: 494.1 },
    { time: "2022-03-21T12:00:00", value: 492.45 },
    { time: "2022-03-21T12:15:00", value: 492.7 },
    { time: "2022-03-21T12:30:00", value: 492.3 },
    { time: "2022-03-21T12:45:00", value: 490 },
    { time: "2022-03-21T13:00:00", value: 490.05 },
    { time: "2022-03-21T13:15:00", value: 489.95 },
    { time: "2022-03-21T13:30:00", value: 489.65 },
    { time: "2022-03-21T13:45:00", value: 491.05 },
    { time: "2022-03-21T14:00:00", value: 491.4 },
    { time: "2022-03-21T14:15:00", value: 492.8 },
    { time: "2022-03-21T14:30:00", value: 492.55 },
    { time: "2022-03-21T14:45:00", value: 490.8 },
    { time: "2022-03-21T15:00:00", value: 490.7 },
    { time: "2022-03-21T15:15:00", value: 491.05 },
    { time: "2022-03-21T15:30:00", value: 490.1 },
  ];
  const visibleTimeRange = {};
  visibleTimeRange.from = new Date(data[0].time).getTime() - 75000 * 6; 
//7.5 minutes offset

  visibleTimeRange.to = new Date(data[data.length - 1].time).getTime() + 75000 * 6;
 //7.5 minutes offset

  chart.timeScale().setVisibleLogicalRange(visibleTimeRange);
}, []);

return <div ref={ref}></div>;

但是，图表不在其时间刻度上显示时间。图表看起来像同一天绘制的一条直线。

其他范围的图表符合预期：

请帮我解决这个问题。谢谢！

Update-1: 在我使用 new Date(date).getTime() 将时间更改为微秒格式后，我能够看到绘图，但 x 轴上的时间和日期是不正确。

Answer 1

这个问题已经回答了here。

基本上，您需要按照 doc 中的说明正确设置时间戳的格式。

使用轻量级图表库绘制一日面积图

Draw one day area chart using lightweight-chart library

javascript

reactjs

charts

lightweight-charts