js将线形图添加到条形图中使条形图消失

我已经创建了一个我想要的正常工作的条形图。现在，我试图添加一个线形图来重叠条形图，但是当我运行代码时，线形图出现了，但条形图消失了。添加直线图似乎很简单，但由于某种原因，它不起作用。我在主机游戏中也没有出现任何错误。

var x_text = ["Comodities","Consumer Discretionary","Utilities",
              "Health & Biotech","Global Real Estate","Financials",
              "Emerging Market Bonds","Technologies","Industrials",
              "Oil & Gas","China Equities","S&P500"];
  //             
  var trace1 = [{ 
    x: x_text, // X axis (names)
    y: zValues, // Values (y axis)
    hoverinfo: zValues, 
    type: 'bar',
    orientation:"v",
    marker: {
    color: color_list, // Color of bars
    line: {
      color: 'rbg(8,48,107)',
      width: 1
    }},
    yauto: false,
    showscale: true,
  }];
  var trace2 = {
  x: x_text,
  y: [-0.1,-0.1,2.3,3.3,1.0,0.4,0.9,3.0,-0.1,-1.4,3.0,0.2],
  mode: 'lines',
  line:{
    color:'black'
  },
  type: 'scatter'
};

  var layout = {
    font:{
      // Text size and color
      size:16,
      family:'helvetica',
      color: "white"
    },
    annotations: arrow(),
    xaxis:  {
      side: 'bottom',
      orientation: "right"
    },
    yaxis: {
      autosize: true,
      tickfont: "white",
      ticksuffix: "%",
      // Y axis scale
      autorange: false,
      range :[-20,20]
    },
    // Graph position
    margin: {
    l: 90,
    r: 90,
    b: 120,
    t: 20,
    pad: 10
  },
    // Graph background colors
    paper_bgcolor: "transparent", 
    plot_bgcolor:"transparent", 
  };
var data = [trace1, trace2];
Plotly.newPlot('myDiv',data,layout);