Question

我正在尝试在Plotly.js的箱线图中获得两个X轴。但是，一旦我开始使用第二个x轴，Plotly.js就会在彼此之上堆叠两个图，如您在this CodePen中所见。

// get node wrapper
var graph = document.getElementById('graph');

var config = {
  showLink: false,
  editable: false,
  displayModeBar: false,
  displaylogo: false
};

var x = [10,20];

Plotly.newPlot(
	graph,
	[{
		boxpoints: 'all',
		fillcolor: 'cls',
		hoverinfo: 'text+y',
		hoveron: 'points',
		//jitter: 0.5,
		line: {width: 1},
		marker: {size: 4, opacity: 0.5},
		text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
		type:'box',
		whiskerwidth:0.2,
		y: [69,36,36,60,97,74,84,33],
		xaxis:'x'
	},
 	{
		boxmean: true,
		boxpoints: 'all',
		fillcolor: 'cls',
		hoverinfo: 'text+y',
		hoveron: 'points',
		//jitter: 0.5,
		line: {width: 1},
		marker: {size: 4, opacity: 0.5},
		text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
		type:'box',
		whiskerwidth:0.2,
		y: [96,21,1,55,46,79,84,62],
		xaxis:'x2'
	}],
	{'title': 'these boxplots shouldnt overlay',
      'xaxis':{
        title:'traditional',
        // tickmode:'array',
        // tickvals:x2,
        // ticktext:x2,
        side: 'bottom',
    },
    'xaxis2':{
        title:'innovative',
        // tickmode:'array',
        // tickvals:x1,
        // ticktext:x1,
        side: 'top',
        overlaying: 'x'
    }, 
  },
  config
);

<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<div id="graph" style="width:1000px;height:500px;">
    
</div>

注释掉第二条轨迹上的第二个x轴，将方框图放置在适当的位置，彼此相邻我在做错什么吗？

Answer 1

// get node wrapper
var graph = document.getElementById('graph');

var config = {
  showLink: false,
  editable: false,
  displayModeBar: false,
  displaylogo: false
};

//var x = [10,20];

var trace1 = {
  boxpoints: 'all',
  fillcolor: 'cls',
  hoverinfo: 'text+y',
  hoveron: 'points',
  //jitter: 0.5,
  line: {width: 1},
  marker: {size: 4, opacity: 0.5},
  text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
  type:'box',
  whiskerwidth:0.2,
  y: [69,36,36,60,97,74,84,33],
  name: 'trace1'
  //xaxis:'x'
};

var trace2 = {
  boxmean: true,
  boxpoints: 'all',
  fillcolor: 'cls',
  hoverinfo: 'text+y',
  hoveron: 'points',
  //jitter: 0.5,
  line: {width: 1},
  marker: {size: 4, opacity: 0.5},
  text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
  type:'box',
  whiskerwidth:0.2,
  y: [96,21,1,55,46,79,84,62],
  name: 'trace2'
  //xaxis:'x2'
};

var data = [trace1, trace2];

var layout = {'title': 'these boxplots shouldnt overlay',
              'xaxis':{
                title:'traditional',
                // tickmode:'array',
                // tickvals:x2,
                // ticktext:x2,
                side: 'bottom',
              },
              'xaxis2':{
                title:'innovative',
                // tickmode:'array',
                // tickvals:x1,
                // ticktext:x1,
                side: 'top',
                overlaying: 'x'
              }, 
             };
Plotly.newPlot(graph, data, layout, config);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="graph" style="width:1000px;height:500px;"> 
</div>

箱形图上的两个x轴

1 个答案: