我如何制作图表以显示范围内的价格？

Question

我正在使用 lightweight-charts 绘制股票数据的财务图表。

绘制图表的部分代码为：

useEffect(() => {

        if (ref.current) {
            ref.current.innerHTML = "";
            const chart = createChart(ref.current, {
                lineVisible: false, width: 400, height: 300, layout: {
                    background: { color: "#1e2125" },
                    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,
                },                
                handleScroll: false,
                handleScale: false,
            });          

           
            const areaSeries = chart.addAreaSeries();
            const data = [
                { time: '2022-02-16', value: 516.7 },
                { time: '2022-02-15', value: 524.8},
                { time: '2022-02-14', value: 501.4 },
                { time: '2022-02-11', value: 529.6 },
                { time: '2022-02-10', value: 540.55 },
                { time: '2022-02-09', value: 535.25 },
                { time: '2022-02-08', value: 531.35 },
                { time: '2022-02-07', value: 533.25 },
                { time: '2022-02-04', value: 530.3},
                { time: '2022-02-03', value: 540.1 },
                { time: '2022-02-02', value: 539.8 },
                { time: '2022-02-01', value: 532.3 },
                { time: '2022-01-31', value: 538.3 }
              ];
            //areaSeries.barsInLogicalRange            
            areaSeries.setData(data);
            setPriceRange(data);

            
        }
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
            chartObj.current && chartObj.current.remove();
        }
    }, [ref.current]);

return (

<div ref={ref} className="alphachart_container">

            </div>
)

但是，它看起来并不像预期的那样。右边的价格范围不是 expected.Ideally 我想将 priceRange 设置为特定值。

const [visiblePriceRange,setVisiblePriceRange] = useState({ from: 88888888188181818, to: -2222222222});
const setPriceRange = (data)=>{
        let min = Math.min(...data.map(x=>x.value),visiblePriceRange.from);
        let max = Math.max(...data.map(x=>x.value),visiblePriceRange.to);
        let offset = (max - min)/10;
        setVisiblePriceRange({from:min-offset,to:max+offset});
       //Now i want that i should only show these price range on y-axis
    }

我查看了关于 minValue 和 maxValue 的 documentation，但没有帮助，因为我无法弄清楚确切的语法。

我当前的图表如下所示：

我希望价格范围在 498 到 544 之间。（为方便起见四舍五入到最接近的整数）。我该怎么做？

Answer 1

I have looked into the documentation about minValue and maxValue but it didn't help as i cannot figure out the exact syntax.

听起来这就是您要找的东西？这是来自 another documentation page 的示例。看起来您只需要像添加 timeScale、priceScale 等一样添加 priceRange

const firstSeries = chart.addLineSeries({
    autoscaleInfoProvider: () => ({
        priceRange: {
            minValue: 0,
            maxValue: 100,
        },
    }),
});

我如何制作图表以显示范围内的价格？

How can i make chart to show price in range?

javascript

reactjs

lightweight-charts