如何重新定位 tradingview 图表以免离开屏幕左侧

Question

Wepbage Output

我正在尝试将 tradingview 轻量级图表重新定位到更中心的位置，而不是延伸到屏幕之外。附加图像是当前显示的输出。

轻量级排行榜 Github = https://github.com/tradingview/lightweight-charts

import React from 'react';
import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 800, height: 500});
const candlestickSeries = chart.addCandlestickSeries();

const log = console.log;

function populateChart() {
    fetch(`https://api.binance.com/api/v3/klines?symbol=ETHUSDT&interval=4h&limit=1000`)
        .then(res => res.json())
        .then(data => {
            const cdata = data.map(d => {
                return { time: d[0] / 1000, open: parseFloat(d[1]), high: parseFloat(d[2]), low:parseFloat(d[3]), close: parseFloat(d[4]) }
        });
        candlestickSeries.setData(cdata);
    })
    .catch(err => log(err))

}

render() {
    return (
        
        <div>
            <h1>Ethereum | USDT</h1>
            <p>{populateChart()}</p>  


        </div>
    );
}

}

Answer 1

您是否尝试过以下方法：

render() {
    return (
        <div style='text-align:center;'>
            <h1>Ethereum | USDT</h1>
            <div>{populateChart()}</div>
        </div>
    );
}

将 p 更改为 div，让您可以更灵活地根据需要更改图表。然后我将起始 div 更改为 CSS 属性 text-align:center; ，这将使所有元素居中。

如何重新定位 tradingview 图表以免离开屏幕左侧

How to reposition tradingview chart so not going off screen to the left

javascript

charts

reactjs

tradingview-api

cryptocurrency