Un usuario preguntó 👇
Estimados miembros del foro,
En las publicaciones de blog individuales incluyo widgets de gráficos de acciones de Tradingview.
El código del widget se puede encontrar en https://www.tradingview.com/widget/advanced-chart/
Selecciono las opciones de stock y configuración y luego marco la casilla ‘Tamaño automático’ para que el widget no se extienda fuera del ancho de la pantalla pero para presionarlo verticalmente es necesario definir la altura del contenedor.
Descubrí que se agregó CSS adicional a la solución y para las dos páginas vinculadas arriba está el código:
#tradingview_813bd div {
height: 600px !important;
}
#tradingview_49ae5 div {
height: 600px !important;
}pero como saben, necesito agregar código adicional para cada widget que se agrega a una publicación de blog porque cada widget tiene una identificación única, como ‘813bd’ y ’49ae5 ′ arriba.
Me pregunto si hay alguna posibilidad de insertar una línea de código para establecer la altura del widget directamente en el código del widget.
El código del widget suele ser:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_e61f1"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_e61f1"
}
);
</script>
</div>
<!-- TradingView Widget END -->¿Tiene sentido esta idea?
Gracias por su ayuda.
(@crouchingbruin)
Hace 1 año, 8 meses
Intentalo:
.tradingview-widget-container div div {
height: 600px !important;
}(@chartsandtrends)
Hace 1 año, 8 meses
Gracias @crouchingbruin por esta idea. Esto establecerá una altura común para todos los widgets de Tradingview, pero hay varios tipos que pueden requerir una configuración de altura personalizada, como las que agregué. esta página. Aquí es donde sucede esto cuando el parámetro ‘Tamaño automático’ no está seleccionado y si miras esta página en un dispositivo móvil, verás cómo los widgets se ejecutan horizontalmente fuera del área de visualización. Estaba pensando que sería posible insertar una línea adicional de código directamente en el código del widget individual para ajustar específicamente la altura del widget. ¿Crees que esto es posible?
(@crouchingbruin)
Hace 1 año, 8 meses
Alternativamente, siempre es una buena práctica no diseñar un elemento directamente usando un estilo característica. En su lugar, escriba reglas CSS que utilicen el ID o la clase del elemento. Hace que sea más fácil anular la SEC si es necesario, sin recurrir a la importante cláusula.
En lo que respecta al ancho, puede intentar establecer el ancho al 100% en lugar de un número fijo de píxeles. Luego, se ajustarán al ancho de cada dispositivo visto y no encontrará los gráficos que se derraman desde un lado.
Para las alturas, puede utilizar preguntas de medios que establecen la altura en función de un ancho de pantalla en particular. Por ejemplo:
#tradingview_5b9e6-wrapper {
height: 610px;
}
@media (max-width: 767px) {
#tradingview_5b9e6-wrapper {
height: 550px;
}
}
@media (max-width: 420px) {
#tradingview_5b9e6-wrapper {
height: 320px;
}
}Primero deberá eliminar la propiedad de altura del estilo en línea # tradeview_5b9e6-wrapper y cambiar la propiedad de altura del siguiente DIV anidado de 610px a 100% para que esto funcione. Pero lo que debería hacer es cambiar la altura del gráfico a las alturas que ve según el ancho de la pantalla. Sin embargo, debe tener cuidado de no reducir tanto la altura que todo el texto y las figuras se junten y sea demasiado difícil de leer.
(@chartsandtrends)
Hace 1 año, 8 meses
Gracias @crouchingbruin; el primer código general funciona para todos los widgets, por lo que no me conecté al segundo.
Sin embargo, estoy luchando con otro widget que no tiene identificación.
Aquí está el código:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/currencies/forex-cross-rates/" rel="noopener" target="_blank"><span class="blue-text">Forex Rates</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js" async>
{
"width": "770",
"height": "400",
"currencies": [
"EUR",
"USD",
"JPY",
"GBP",
"CHF",
"AUD",
"CAD",
"NZD",
"CNY"
],
"locale": "en"
}
</script>
</div>
<!-- TradingView Widget END -->Este también se extiende horizontalmente en pantallas pequeñas. El tamaño de píxel se reemplaza por:
«Ancho»: «100%», «alto»: «100%»,
No estoy seguro de cómo configurar el ancho automático para este porque falta la identificación. ¿Hay algún arreglo aquí por favor?
(@chartsandtrends)
Hace 1 año, 8 meses
Lo siento, encontré la solución estableciendo las dimensiones como: «ancho»: «100%», «alto»: «400»,
El resultado es bastante sorprendente. Mira Aquí.
Gracias por la gran ayuda.
¿Solucionó tu problema??
0 / 0