18010 sujets

Questions générales et questions de débutants

[Résolu] Cadre intégré en responsive

Bonjour,

J'ai un code qui me sort un graph.

<div id="embed" style="height: 400px; width: 660px; "></div>


Le truc c'est que c'est pas responsive Smiley bawling

Si vous avez une solution, je suis preneur.

Voilà ma source :

<html>
	<head>
		<script type="text/javascript" src="https://www.bullionvault.com/chart/bullionvaultchart.js" ></script>
		<script type="text/javascript" >
			var options = {
				bullion: 'gold',
				currency: 'USD',
				timeframe: '1w',
				chartType: 'line',
				miniChartModeAxis : 'oz',
				referrerID: 'MYUSERNAME',
				containerDefinedSize: true,
				miniChartMode: false,
				displayLatestPriceLine: true,
				switchBullion: true,
				switchCurrency: true,
				switchTimeframe: true,
				switchChartType: true,
				exportButton: true
			};
			var chartBV = new BullionVaultChart(options, 'embed');
		</script>
	</head>
	<body>
	<div id="embed" style="height: 400px; width: 660px; "></div>
	</body>
	</html>


J'utilise Bootstrap 3
Merci.
Modifié par Tintin75 (27 Apr 2018 - 16:56)
Aye, ça le fait pas. A première vue ça n'aime pas les % Smiley bawling

J'ai diminué les pourcentages de 25 % en taille, mais c'est pas top.

La taille est parfaite sur pc, mais sur mobile, bah c'est pas responsive.
Modifié par Tintin75 (27 Apr 2018 - 17:07)
Vérifie que t'as ceci dans le <head> de ta page
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">

ou essaie avec ça
<div id="embed" style="height: auto; width: 100vw; "></div>

Modifié par bazooka07 (27 Apr 2018 - 17:32)
Je récupère le graphique d'un site. J'ai juste à l'afficher sur mon site pour avoir le cours de l'or. Le site donne le code pour que l'on puisse utiliser son service.
Modifié par Tintin75 (27 Apr 2018 - 17:42)
Oui c'est bien ça. Smiley cligne Mais, c'est du code exporté que j'utilise.
Modifié par Tintin75 (27 Apr 2018 - 17:59)
Connait pas le code exporté.
Je suppose que t'as lu cette doc :
https://or.bullionvault.fr/help/custom_gold_price_charts.html
Mais sur le site de bullionvault.com, ce n'est plus tout à fait cela :
<script type="text/javascript">
			var options = {
				bullion: 'gold',
				containerDefinedSize: true,
				switchBullion: true,
				switchCurrency: true,
				switchTimeframe: true,
				switchChartType: true,
				exportButton: true,
				displayLatestPriceLine: true,
				resourcesRootPath: ''
			};
// ....
var chartBV = new BullionVaultChart(options, 'jsChart');
// ....
</script>

<body>
<div id="jsChart" class="full-width"></div>
</body>

.full-width {
    max-width: 100% !important;
    width: 100%;
}

De plus les événements window.onresize et window.onload sont apparemment gérés pour ajuster la hauteur de #jsChart.

N.B.: Ctrl-U pour afficher le source de la page HTML et F12 pour afficher l'inspecteur Web dans son navigateur préféré
Meilleure solution
Sujet clos
Aller à