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

Posted 2023-02-18

【中文标题】在 Javascript 中通过 Plotly 绘制数据的 HTML 不显示任何数据

【英文标题】：HTML plotting data via Plotly in Javascript not showing any data

【发布时间】：2021-09-14 19:26:58

【问题描述】：

我正在尝试通过我自己的服务器上的 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
);
  ;

这是数据转换成两个数组后的sn-p代码：

[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"]

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

提前谢谢你！

【参考方案1】：

您的绘图语法存在一些问题。

首先应该是Plotly.newPlot 而不是Plotly.plot。不存在Plotly.plot 函数（至少在我测试的版本中没有：2.3.1（当前最新版本）。其他版本也是如此，但我没有全部测试过）。

您将参数传递给绘图函数的方式也不正确。它的形式应该是：

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

graphDiv DOM 节点或 DOM 节点的字符串 ID 对象的数据数组（默认为 []） 布局对象（默认为 ） 配置对象（默认为 ）

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 
);