Title: TypeError: Plotly.newPlot(...).Promise is undefined
Title: TypeError: Plotly.newPlot(...).Promise is undefined
如果我使用下面的代码行：
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ;
在下面的 plotly plot 函数中，在在线代码编辑器中调用 plot(crypto("BTC")) 我得到
[对象承诺]
如果我将上面的代码行更改为：
CreateInputDiv();
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }).Promise.resolve();
然后我在在线代码编辑器中得到了绘图，但随后我也在 console.log
中得到了以下错误
TypeError: Plotly.newPlot(...).Promise 未定义
我怀疑我做的事情是否正确，因为我很难理解异步函数和承诺的工作原理。我的问题的解决方案可能非常简单，也可能不简单。如果上面的代码工作正常，我就不必创建新的输入 div，因为函数 parse() 创建输入和输出 divs，而且我也不会在控制台日志中收到错误。 console.log中的错误提示如何解决？
JavaS.js和HTML低于
// counts the number of input divs created
function increment() {
increment.n = increment.n || 0;
return ++increment.n;
}
// creates an input div
function CreateInputDiv() {
increment();
cc = increment.n;
//console.log("increment.n = " + cc);
input = document.createElement("div");
input.setAttribute("id", "input" + cc);
input.setAttribute("class", "input");
input.innerHTML = " ";
input.setAttribute("contenteditable", "true");
input.setAttribute("onkeypress", "parse(event, this)");
document.getElementById('calc').appendChild(input);
input.focus();
}
// creates an output div
function CreateOutputDiv() {
output = document.createElement("div");
output.setAttribute("id", "output" + cc);
output.setAttribute("class", "output");
output.setAttribute("tabindex", "0");
output.setAttribute("contenteditable", "false");
document.getElementById('calc').appendChild(output);
}
function parse(e1, e2) {
console.log("e2 = " + e2);
if (e1.keyCode == 13) { // keycode for enter
event.preventDefault();
var inId = e2.id;
console.log("inId = " + inId);
var outId = "output" + inId.substring(5);
console.log("outId = " + outId);
var inz = input.innerText;
// check if input contains a colon. Hides output if colon exist.
if (inz.indexOf(':') > -1) {
var inz = input.innerText.replace(/:/g, '');
console.log("input with colon = " + inz);
var outz = eval(inz);
console.log("hidden out = " + outz);
document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
CreateOutputDiv();
CreateInputDiv();
}
else { // no colon = display and revaluate input
if (document.getElementById(outId)) {
console.log("Already created");
inz = document.getElementById(inId).innerText;
console.log("inz = " + inz);
var outz = eval(inz);
console.log("outz = " + outz);
document.getElementById(outId).innerHTML = outz;
input.focus();
}
else { // no colon = display create new lines
document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
CreateOutputDiv();
// calculate and assign output value to output div
// console.log("input = " + inz);
var outz = eval(inz);
// console.log("out z = " + outz);
output.innerHTML = outz;
CreateInputDiv();
}
}
}
}
function T(UNIX_timestamp) {
var MyDate = new Date(UNIX_timestamp * 1000);
var MyDateString = MyDate.getFullYear() + '-' + ('0' + (MyDate.getMonth() + 1)).slice(-2) + '-' + ('0' + MyDate.getDate()).slice(-2);
return JSON.stringify(MyDateString);
}
function crypto(ticker) {
var ApiKey = "ddd85b386e1a7c889e468a4933f75f22f52b0755b747bdb637ab39c88a3bc19b";
var urlA = "https://min-api.cryptocompare.com/data/histoday?fsym=" + ticker + "&tsym=USD&limit=1000&api_key=" + ApiKey;
var result = null;
$.ajax({
url: urlA,
async: false, // makes a synchrously data call to cryptocompare
dataType: "json",
success: function (data) { result = data; }
});
var y = result.Data;
var D1 = [];
var D2 = [];
for (var i = 0; i < y.length; i++) {
D1.push(T(y[i].time));
D2.push(y[i].close);
}
console.log(D2);
return D2;
}
// plots a give data array
function plot(z) {
var yy = z;
var xx = [];
for (var i = 0; i <= yy.length; i++) {
xx[i] = JSON.stringify(i);
}
var data = [{
x: xx,
y: yy,
type: 'scatter',
line: { color: 'green', width: 2 }
}];
var layout =
{
width: 700,
height: 300,
paper_bgcolor: 'lightblue',
plot_bgcolor: 'lightblue',
margin: { l: 60, b: 60, r: 20, t: 20 },
title: "",
xaxis: {
title: 'x-axis', titlefont: {
family: 'Courier New, monospace', size: 18,
color: 'black'
}
},
yaxis: {
title: 'y-axis', titlefont: { family: 'Courier New, monospace', size: 18, color: 'black' },
width: 1000, height: 380,
xaxis: {
tickfont: { size: 12, color: 'black' }, showgrid: true, tickmode: "linear",
gridcolor: 'black', linecolor: 'black'
},
yaxis: {
tickfont: { size: 12, color: 'black' }, showgrid: true,
gridcolor: 'black', linecolor: 'black'
}
}
};
cc = increment.n;
div1 = 'output' + cc;
// return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ; // object promise
CreateInputDiv();
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }).Promise.resolve();
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaS.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<style>
.input {
background-color: lightgreen;
width: 980px;
border: none;
font-size: 16px;
resize: none;
}
.output {
background-color: lightblue;
width: 980px;
line-height: 20px;
border: none;
font-size: 16px;
resize: none;
overflow-wrap: break-word;
}
#count {
background-color: lightblue;
color: black;
width: 25px;
height: 500px;
font-size: 17px;
resize: none;
border: none;
}
#calc {
background-color: lightblue;
vertical-align: top;
border: none;
overflow: hidden;
}
</style>
</head>
<body bgcolor="grey">
<table align="center" width="1000px" height="500px" bgcolor="lightblue" overflow="hidden">
<tr>
<td><textarea id="count" disabled>1 </textarea> </td>
<td id="calc"></td>
</tr>
</table>
<script> CreateInputDiv(); </script>
</body>
</html>
可以在下面找到上述绘图问题的有效解决方案。代替
该行
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ; // object promise
在绘图函数中使用
setTimeout(function(){Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true });}, 10);
return "";
这将在 Web 编辑器中为您提供 plotly.js 图，而不会在控制台日志中获得 [object Promise] 或任何错误消息。
如果我使用下面的代码行：
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ;
在下面的 plotly plot 函数中，在在线代码编辑器中调用 plot(crypto("BTC")) 我得到
[对象承诺]
如果我将上面的代码行更改为：
CreateInputDiv();
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }).Promise.resolve();
然后我在在线代码编辑器中得到了绘图，但随后我也在 console.log
中得到了以下错误TypeError: Plotly.newPlot(...).Promise 未定义
我怀疑我做的事情是否正确，因为我很难理解异步函数和承诺的工作原理。我的问题的解决方案可能非常简单，也可能不简单。如果上面的代码工作正常，我就不必创建新的输入 div，因为函数 parse() 创建输入和输出 divs，而且我也不会在控制台日志中收到错误。 console.log中的错误提示如何解决？
JavaS.js和HTML低于
// counts the number of input divs created
function increment() {
increment.n = increment.n || 0;
return ++increment.n;
}
// creates an input div
function CreateInputDiv() {
increment();
cc = increment.n;
//console.log("increment.n = " + cc);
input = document.createElement("div");
input.setAttribute("id", "input" + cc);
input.setAttribute("class", "input");
input.innerHTML = " ";
input.setAttribute("contenteditable", "true");
input.setAttribute("onkeypress", "parse(event, this)");
document.getElementById('calc').appendChild(input);
input.focus();
}
// creates an output div
function CreateOutputDiv() {
output = document.createElement("div");
output.setAttribute("id", "output" + cc);
output.setAttribute("class", "output");
output.setAttribute("tabindex", "0");
output.setAttribute("contenteditable", "false");
document.getElementById('calc').appendChild(output);
}
function parse(e1, e2) {
console.log("e2 = " + e2);
if (e1.keyCode == 13) { // keycode for enter
event.preventDefault();
var inId = e2.id;
console.log("inId = " + inId);
var outId = "output" + inId.substring(5);
console.log("outId = " + outId);
var inz = input.innerText;
// check if input contains a colon. Hides output if colon exist.
if (inz.indexOf(':') > -1) {
var inz = input.innerText.replace(/:/g, '');
console.log("input with colon = " + inz);
var outz = eval(inz);
console.log("hidden out = " + outz);
document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
CreateOutputDiv();
CreateInputDiv();
}
else { // no colon = display and revaluate input
if (document.getElementById(outId)) {
console.log("Already created");
inz = document.getElementById(inId).innerText;
console.log("inz = " + inz);
var outz = eval(inz);
console.log("outz = " + outz);
document.getElementById(outId).innerHTML = outz;
input.focus();
}
else { // no colon = display create new lines
document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);
CreateOutputDiv();
// calculate and assign output value to output div
// console.log("input = " + inz);
var outz = eval(inz);
// console.log("out z = " + outz);
output.innerHTML = outz;
CreateInputDiv();
}
}
}
}
function T(UNIX_timestamp) {
var MyDate = new Date(UNIX_timestamp * 1000);
var MyDateString = MyDate.getFullYear() + '-' + ('0' + (MyDate.getMonth() + 1)).slice(-2) + '-' + ('0' + MyDate.getDate()).slice(-2);
return JSON.stringify(MyDateString);
}
function crypto(ticker) {
var ApiKey = "ddd85b386e1a7c889e468a4933f75f22f52b0755b747bdb637ab39c88a3bc19b";
var urlA = "https://min-api.cryptocompare.com/data/histoday?fsym=" + ticker + "&tsym=USD&limit=1000&api_key=" + ApiKey;
var result = null;
$.ajax({
url: urlA,
async: false, // makes a synchrously data call to cryptocompare
dataType: "json",
success: function (data) { result = data; }
});
var y = result.Data;
var D1 = [];
var D2 = [];
for (var i = 0; i < y.length; i++) {
D1.push(T(y[i].time));
D2.push(y[i].close);
}
console.log(D2);
return D2;
}
// plots a give data array
function plot(z) {
var yy = z;
var xx = [];
for (var i = 0; i <= yy.length; i++) {
xx[i] = JSON.stringify(i);
}
var data = [{
x: xx,
y: yy,
type: 'scatter',
line: { color: 'green', width: 2 }
}];
var layout =
{
width: 700,
height: 300,
paper_bgcolor: 'lightblue',
plot_bgcolor: 'lightblue',
margin: { l: 60, b: 60, r: 20, t: 20 },
title: "",
xaxis: {
title: 'x-axis', titlefont: {
family: 'Courier New, monospace', size: 18,
color: 'black'
}
},
yaxis: {
title: 'y-axis', titlefont: { family: 'Courier New, monospace', size: 18, color: 'black' },
width: 1000, height: 380,
xaxis: {
tickfont: { size: 12, color: 'black' }, showgrid: true, tickmode: "linear",
gridcolor: 'black', linecolor: 'black'
},
yaxis: {
tickfont: { size: 12, color: 'black' }, showgrid: true,
gridcolor: 'black', linecolor: 'black'
}
}
};
cc = increment.n;
div1 = 'output' + cc;
// return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ; // object promise
CreateInputDiv();
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }).Promise.resolve();
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaS.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<style>
.input {
background-color: lightgreen;
width: 980px;
border: none;
font-size: 16px;
resize: none;
}
.output {
background-color: lightblue;
width: 980px;
line-height: 20px;
border: none;
font-size: 16px;
resize: none;
overflow-wrap: break-word;
}
#count {
background-color: lightblue;
color: black;
width: 25px;
height: 500px;
font-size: 17px;
resize: none;
border: none;
}
#calc {
background-color: lightblue;
vertical-align: top;
border: none;
overflow: hidden;
}
</style>
</head>
<body bgcolor="grey">
<table align="center" width="1000px" height="500px" bgcolor="lightblue" overflow="hidden">
<tr>
<td><textarea id="count" disabled>1 </textarea> </td>
<td id="calc"></td>
</tr>
</table>
<script> CreateInputDiv(); </script>
</body>
</html>
可以在下面找到上述绘图问题的有效解决方案。代替 该行
return Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true }) ; // object promise
在绘图函数中使用
setTimeout(function(){Plotly.newPlot(div1, data, layout, { displayModeBar: false, staticPlot: true });}, 10);
return "";
这将在 Web 编辑器中为您提供 plotly.js 图，而不会在控制台日志中获得 [object Promise] 或任何错误消息。