HTML通过Javascript中的Plotly绘制数据，不显示任何数据

Question

我正试图从自己的服务器上通过JS在HTML网站上绘制一些数据，但我无法获得任何视觉数据。

我使用的绘图工具是Plotly。

这是我的JS代码，试图绘制数据：

TESTER = document.getElementById('graphDiv');
var xmlhttp = new XMLHttpRequest();
var preise=[]
var allePreise={}
var daten=[]
var alleDaten={}
xmlhttp.open("GET", "[HTTP LINK]", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
data = JSON.parse(this.responseText);

console.log(data)
for (x in data) {
preise=[]
daten=[]
for(y in data[x]){
preise.push((data[x][y].price))
daten.push((data[x][y].date))
}
allePreise[x]=preise
alleDaten[x]=daten
}
console.log(allePreise["CS20 Case"])
console.log(alleDaten["CS20 Case"])
}
var counter=0
for (i in allePreise){
counter=counter+1
var trace1 = {
x: alleDaten[i],
y: allePreise[i],
mode: 'lines'
}
}

Plotly.plot( TESTER, [{
trace1
//type: 'bar',
//mode: 'lines+markers',
}], { 
margin: { t: 0 } 
},
{scrollZoom: true}
);
};

这是数据转换为两个数组后的代码片段：

[5.492,3.006,1.618,1.373,1.014,0.665]
["Oct 18 2019 01: +0","Oct 19 2019 01: +0","Oct 20 2019 01: +0"]

我的代码或数据有问题吗？我试了一个多小时。

提前谢谢！

Answer 1

绘图语法存在一些问题。

首先它应该是Plotly.newPlot而不是Plotly.plot。不存在Plotly.plot函数(至少在我测试的版本2.3.1(当前最新版本(中没有。这同样适用于其他版本，但我还没有测试所有版本(。

此外，将参数传递给绘图函数的方式也不正确。它应该采用以下形式：

Plotly.newPlot(graphDiv, data, layout, config)

graphDiv DOM节点或DOM节点的字符串id
对象的数据数组(默认为[](
布局对象(默认为｛｝(
config对象(默认值为｛}(

https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot

因此，一个可重复的例子可能是这样的：

const x = ["Oct 18 2019 01: +0", "Oct 19 2019 01: +0", "Oct 20 2019 01: +0"];
const y = [5.492, 3.006, 1.618, 1.373, 1.014, 0.665];
const trace1 = {
x: x,
y: y,
mode: "lines",
};
Plotly.newPlot(
"graphDiv",
[trace1],
{ margin: { t: 0 } },
{ scrollZoom: true }
);