我们可以在nextjs中使用轻量级图表作为组件，并将数据作为支持传递吗？

Question

以这种方式进口

const createChart  = dynamic(() => import("lightweight-charts"), { ssr: false });

在组件和传递道具中使用它

<createChart
  options={{
    width: 700,
    height: 400,
    timeScale: {
      timeVisible: true,
      secondsVisible: true,
    },
  }}
  candlestickSeries={[{ data: candlestickDataPoints }]}
/>;

Answer 1

不能将createChart直接用作组件。但是，您可以创建自己的组件，然后直接与createChart交互。

这里有个小片段。

import { createChart, CrosshairMode } from 'lightweight-charts';
import { useEffect, useRef } from 'react';

const CandleStickChart = ({ OHLC_Data }) => {
    const chartContainerRef = useRef(null);

    useEffect(() => {
        const chart = createChart(chartContainerRef.current, {
            width: 700,
            height: 400,
            timeScale: {
                timeVisible: true,
                secondsVisible: false,
                fixLeftEdge: true,
                fixRightEdge: true,
            },
            crosshair: {
                mode: CrosshairMode.Normal,
            },
        });
        const candleSeries = chart.addCandlestickSeries({});

        candleSeries.setData(OHLC_Data);

        return () => {
            chart.remove();
        };
    }, [OHLC_Data]);

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