如何调整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;居中所有元素。