使用Plotly.JS绘制多条折线图显示空图如何解决？

代码存在两处直接导致渲染失败的错误：

• plot_data初始被定义为空对象{}，对象不存在push()方法，执行plot_data.push(data)时会直接抛出JS类型错误，中断后续绘图逻辑。单折线、柱状图能正常运行，是因为对应代码里没有这段错误的push操作，直接传入了符合要求的trace数组。
• Plotly的newPlot方法第二个参数要求传入由trace对象组成的一维数组，你将本身已是trace数组的data整体push进plot_data，会形成嵌套的二维数组，即使修正了类型问题，Plotly也无法正确解析数据结构。

// 初始化时直接定义为数组类型，不要声明为空对象
var plot_data = []
var trace1 = {
    x: [4, 3, 1],
    y: [1, 3, 6],
    mode: 'lines',
    type: 'scatter'
};

var trace2 = {
    x: [6, 8, 9],
    y: [1, 2, 4],
    mode: 'lines',
    type: 'scatter'
};

// 逐个将trace对象加入数组，不要把整个trace数组作为单个元素push
plot_data.push(trace1);
plot_data.push(trace2);

var layout = 
{
  title: { 
    text: 'Task Plot', 
    font: { family: 'Courier New, monospace', size: 24 }, 
    xref: 'paper', 
    x: 0.05
  }
};

var tester = document.getElementById('myDash');
Plotly.newPlot(tester, plot_data, layout);

你也可以跳过push操作，直接组装符合要求的trace数组，代码更简洁：

var trace1 = {
    x: [4, 3, 1],
    y: [1, 3, 6],
    mode: 'lines',
    type: 'scatter'
};

var trace2 = {
    x: [6, 8, 9],
    y: [1, 2, 4],
    mode: 'lines',
    type: 'scatter'
};

// 直接组装一维trace数组
var data = [trace1, trace2];

var layout = {
  title: { text: 'Task Plot', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05 }
};

Plotly.newPlot(document.getElementById('myDash'), data, layout);

内容的提问来源于stack exchange，提问作者Giovanni Michel