Ich habe eine Website, die HTML (komm aus einer Datenbank) in ein div lädt. Verwenden von Backbone als Rahmen und Lenker als Vorlagenwerkzeug.laden html in div mit Javascript enthalten
In diesem HTML habe ich auch etwas Javascript, das auch perfekt funktioniert.
Allerdings, wenn ich versuche, auch die plotly cdn oder sogar das ganze Javascript aufzunehmen, wird es Plotly nicht erkennen. den Fehler führt in:
„Plotly nicht definiert“
ich diesen Laden zu lösen versuchte Plotly jQuery verwenden und sogar den vollständigen minimierte Plotly-Code in den HTML jedoch ohne Ergebnis platzieren.
Dies ist HTML/JavaScript-Code, was funktioniert, wenn sie in ein div geladen .:
<div class='ldbp_img' style='overflow: auto; height:100%; width: 100%;'></div>
<script type='application/javascript' language='JavaScript'>
if (!Date.now) {
Date.now = function() { return new Date().getTime(); }
}
var img = new Image(),
imageUrl = "http://new.image.nu/1234.png',
interval = 30000;
$(img).attr('width', '100%');
$(img).attr('height', '100%');
var setImg = function() {
//var img = new Image();
var time = Math.floor(Date.now()/1000);
img.src = imageUrl + time;
$('.ldbp_img').html(img);
};
img.src = imageUrl';
$('.ldbp_img').html(img);
if (window.countInt) {
clearInterval(window.countInt);
window.countInt = null;
}
window.countInt = setInterval(setImg, interval);
</script>
Beim Laden plotly funktioniert es nicht:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout);
</script>
Ich habe auch versucht, dies mit jQuery mit nein Ergebnis:
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
$.ajax({
url: "https://cdn.plot.ly/plotly-latest.min.js",
dataType: "script",
cache: true,
success: function() {
runNow();
}
});
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
var runNow = function() {
Plotly.plot('my-graph', data, layout);
};
</script>
das funktioniert in jsfiddle, ist der einzige Unterschied, dass ich die html async nicht laden in das DOM.
Arbeits Geigen: https://jsfiddle.net/b2js15nm/ https://jsfiddle.net/b2js15nm/1/
Daher !: ich nicht Rückgrat und Lenker verwenden kann, um wirklich die Situation neu zu erstellen. Es sieht so aus, als ob AMD von Plotly nicht funktioniert, wenn es später auf der Seite geladen wird. Daher wird Plotly nicht definiert.
den Code fügt hinzu, dass nicht funktioniert Geige, es hat keinen Sinn, für wen es funktioniert: P –
einen besonderen Grund, dass die JavaScript ist nicht in der Rückansicht? Was Sie versuchen, ist ein bisschen seltsam. –
Dieses Bit wird mit einer Vorlage mit Backbone und Lenker geladen. Der Inhalt dieser Ansicht stammt aus einer Datenbank, die auch plotly enthält. Der Grund dafür ist, dass ein Benutzer sein eigenes Diagramm erstellen und in das Dashboard einfügen kann. – BonifatiusK