高级实时图表交易视图小部件自定义详细信息部分答案

【问题标题】：Advanced Real-Time chart tradingview widget customize details section高级实时图表交易视图小部件自定义详细信息部分
【发布时间】：2023-02-13 02:56:20
【问题描述】：

我有一个嵌入式 Tradingview 小部件，我面临的唯一问题是称为详细信息的右侧面板的问题。它的宽度对我来说太小了，我将如何继续调整右侧面板的宽度？

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_93c62"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height": "700",
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "2",
"locale": "en_EN",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"save_image": false,
"details": true,
"container_id": "tradingview_93c62"

}
);
</script>
</div>
<!-- TradingView Widget END -->

在小部件中嵌入的 Iframe 代码上，它标记为“layout __ area--right”，我尝试为该 div 类应用 css 但似乎不起作用。该部分的宽度保持不变

【问题讨论】：

标签： widget tradingview-api

【解决方案1】：

要调整 TradingView 小部件的“详细信息”部分的宽度，您可以使用 CSS 为类为“layout__area--right”的元素设置固定宽度。您可以将以下 CSS 代码添加到您的 HTML 文件中：

<style>
.layout__area--right {
width: 50% !important;
}
</style>

在上面的代码中，您可以将宽度百分比调整为您想要的值。 !important 声明用于覆盖 TradingView 小部件定义的任何内联样式。

请注意，必须在 TradingView 小部件脚本之前添加 CSS 代码。

【讨论】：