javascript - 如何重新定位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>
);
}
}
解决方案
您是否尝试过以下方法:
render() {
return (
<div style='text-align:center;'>
<h1>Ethereum | USDT</h1>
<div>{populateChart()}</div>
</div>
);
}
将 更改p
为div
让您可以根据需要更灵活地更改图表。然后我改变了开始div
,让 CSS 属性text-align:center;
居中所有元素。
推荐阅读
- algorithm - 查找矩形的缺失坐标
- bluetooth-lowenergy - 低功耗蓝牙的传输功率是 Android 可配置的吗?
- ssl - 使用 cloud_proxy_sql 设置自定义 CA 证书
- java - 如何使用数组创建扫描仪并在 java 中找到输入用户的最小值、最大值和平均值?
- python - 在谷歌云上部署 python 文件
- laravel - Laravel - 将查询放在自定义请求中的好习惯?
- java - 如何在构建的 pom.xml 中打印属性?
- javascript - 如何通过 nodejs 将此文本转换为 JSON?
- bash - 将 bash 中的正斜杠添加到变量字符串输出
- python - 在python中的其他轴上找到具有相同索引的最大索引