Plotly.js中单个图的多个X轴

Question

I have a single trace, which I want to show two units of measurement for the X axis.

Imagine my plot has "Inches" as the normal X axis. I also want to show "Centimeter" at the same time as another X axis right underneath the first X axis.

Inches and Centimeter have a 1:1 relationship, so there shouldn't be any funny business related to warping the trace.

I tried something like this for my layout:

var layout = {
    title: '',
    xaxis: {
        autorange: true,
        rangeslider: {},
        type: 'linear',
        title: 'Inches'
    },
    xaxis2: {
        autorange: true,
        rangeslider: {},
        type: 'linear',
        title: 'Centimeter',
        overlaying: 'x'
    },
    yaxis: {
        autorange: true,
        type: 'linear',
        title: ''
    },
};

But this doesn't work, and for obvious reasons since I am not even including details about the Centimeter conversion.

Do you all know how to achieve a view like this? Would I need to make a second trace with matching Y data?

Answer 1

Not sure that's really you want. But it's can help you to play with this.

Please visit the: example

var y = ['dot','pen','pencil','scale','stick'];
var x = [0,5,9,12,16];//inc
var tinc = []; //inc
var tcm = []; //cm
var incToCm ='';
for (var i = 0; i < x.length; i++) 
{
   incToCm = (x[i] * 2.54)+'cm';
   tcm.push(incToCm);
   tinc.push(x[i]+'inc');
}

var trace1 = {
  x:x,
  y:y,
  type:'bar',
  xaxis:'x',
  yaxis:'y'
}
var trace2 = {
  x:trace1.x,
  y:trace1.y,
  type:trace1.type,
  xaxis:'x2',
  yaxis:'y'
}
var data =[trace1,trace2];
var layout={
  xaxis:{
    tickvals:x,
    ticktext:tinc,
    ticksuffix:'inc',
    tickangle:45,
  }, 
  xaxis2:{
    tickvals:x,
    ticktext:tcm,
    ticklen:18,
    tickangle:45,
    tickwidth:0,
    tickcolor:'#eee',
  },
  showlegend:false
}
Plotly.plot('plotElement', data,layout);

Sample output