Javascript 箱线图上的两个x轴

我试图在Plotly.js中的方框图中获得两个x轴。但是，只要我开始使用第二个x轴Plotly.js，就会将两个图堆叠在一起，如中所示

//获取节点包装器
var-graph=document.getElementById（'graph'）；
变量配置={
showLink:false，
可编辑：false，
displayModeBar:false，
displaylogo:错误
};
var x=[10,20]；
Plotly.newPlot(
图表
[{
boxpoints:'全部'，
fillcolor:'cls'，
hoverinfo:'text+y'，
hoveron:'点'，
//抖动：0.5，
行：{宽度：1}，
标记：{大小：4，不透明度：0.5}，
文本：[“安妮”、“德克”、“乔普”、“温迪”、“卡伦”、“艾伯特”、“斯科特”、“勒内”]，
类型：'box'，
胡须宽度：0.2，
y:[69,36,36,60,97,74,84,33]，
xaxis:'x'
},
{
是的，
boxpoints:'全部'，
fillcolor:'cls'，
hoverinfo:'text+y'，
hoveron:'点'，
//抖动：0.5，
行：{宽度：1}，
标记：{大小：4，不透明度：0.5}，
文本：[“安妮”、“德克”、“乔普”、“温迪”、“卡伦”、“艾伯特”、“斯科特”、“勒内”]，
类型：'box'，
胡须宽度：0.2，
y:[96,21,1,55,46,79,84,62]，
xaxis:'x2'
}],
{'title'：'这些方框图不应该覆盖'，
“xaxis”：{
标题:"传统",，
//勾选模式：'array'，
//滴答声：x2，
//文本：x2，
侧面：'底部'，
},
“xaxis2”：{
标题:"创新",，
//勾选模式：'array'，
//滴答声：x1，
//文本：x1，
边：'顶'，
覆盖：“x”
}, 
},
配置
);


//获取节点包装器
var-graph=document.getElementById（'graph'）；
变量配置={
showLink:false，
可编辑：false，
displayModeBar:false，
displaylogo:错误
};
//var x=[10,20]；
变量trace1={
boxpoints:'全部'，
fillcolor:'cls'，
hoverinfo:'text+y'，
hoveron:'点'，
//抖动：0.5，
行：{宽度：1}，
标记：{大小：4，不透明度：0.5}，
文本：[“安妮”、“德克”、“乔普”、“温迪”、“卡伦”、“艾伯特”、“斯科特”、“勒内”]，
类型：'box'，
胡须宽度：0.2，
y:[69,36,36,60,97,74,84,33]，
名称：“trace1”
//xaxis:'x'
};
变量trace2={
是的，
boxpoints:'全部'，
fillcolor:'cls'，
hoverinfo:'text+y'，
hoveron:'点'，
//抖动：0.5，
行：{宽度：1}，
标记：{大小：4，不透明度：0.5}，
文本：[“安妮”、“德克”、“乔普”、“温迪”、“卡伦”、“艾伯特”、“斯科特”、“勒内”]，
类型：'box'，
胡须宽度：0.2，
y:[96,21,1,55,46,79,84,62]，
名称：“trace2”
//xaxis:'x2'
};
var数据=[trace1，trace2]；
var layout={'title'：'这些箱线图不应重叠'，
“xaxis”：{
标题:"传统",，
//勾选模式：'array'，
//滴答声：x2，
//文本：x2，
侧面：'底部'，
},
“xaxis2”：{
标题:"创新",，
//勾选模式：'array'，
//滴答声：x1，
//文本：x1，
边：'顶'，
覆盖：“x”
}, 
};
Plotly.newPlot（图形、数据、布局、配置）
谢谢@floopie，但是第二个x轴在哪里？我需要两个x轴，一个在顶部，一个在底部。