plotly在JS中画图时反转X轴坐标

reverse X axis

将上图转化为下图的方式：

1. X轴数据反转
2. layout增加autorange:'reversed'属性

如果只做1，画图时X轴会自动从小到大排列；如果只做2，数据是反向的。 

详细介绍：https://plot.ly/javascript/

<script type="text/javascript">
var data=[{x:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],y:[2.20062e+06,2.19431e+06,2.17626e+06,2.1751e+06,2.17774e+06,2.14122e+06,2.13958e+06,2.1895e+06,2.1622e+06,2.17884e+06,2.18211e+06,2.14522e+06,2.16187e+06,2.20341e+06,2.14001e+06,2.18072e+06,2.18637e+06,2.19261e+06,2.17168e+06,2.20367e+06,2.18312e+06,2.18186e+06,2.18688e+06,2.17765e+06,2.18011e+06,2.16529e+06,2.14471e+06,2.16855e+06,2.16601e+06,2.1635e+06,2.16881e+06,2.19644e+06,2.15156e+06,2.20987e+06,2.18737e+06,2.13784e+06,2.12811e+06,2.17045e+06,2.16323e+06,2.18495e+06,2.17972e+06,2.1605e+06,2.0841e+06,2.24242e+06,2.07666e+06],name: 'A(not compute%)',mode:'lines',line:{color:'rgba(128,128,0,1.0)', width:1}
},{x:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],y:[1.71768e+06,1.75593e+06,1.74184e+06,1.7168e+06,1.73597e+06,1.69948e+06,1.72848e+06,1.72187e+06,1.72719e+06,1.70904e+06,1.72436e+06,1.74304e+06,1.72559e+06,1.73873e+06,1.77126e+06,1.71163e+06,1.7104e+06,1.70222e+06,1.72524e+06,1.70008e+06,1.73762e+06,1.72422e+06,1.7622e+06,1.76622e+06,1.79434e+06,1.7185e+06,1.74063e+06,1.73153e+06,1.70489e+06,1.71856e+06,1.74928e+06,1.72809e+06,1.75708e+06,1.76115e+06,1.75045e+06,1.7546e+06,1.74837e+06,1.74653e+06,1.75312e+06,1.75671e+06,1.74189e+06,1.71998e+06,1.73449e+06,1.63481e+06,1.78503e+06],name: 'T(not compute%)',mode:'lines',line:{color:'rgba(128,0,128,1.0)', width:1}
},{x:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],y:[2.18838e+06,2.17242e+06,2.18307e+06,2.17749e+06,2.18747e+06,2.20542e+06,2.1697e+06,2.20515e+06,2.21066e+06,2.1956e+06,2.20592e+06,2.1969e+06,2.21731e+06,2.20449e+06,2.17534e+06,2.212e+06,2.20075e+06,2.20342e+06,2.18754e+06,2.20796e+06,2.1979e+06,2.19713e+06,2.18679e+06,2.15589e+06,2.14097e+06,2.2196e+06,2.16166e+06,2.17908e+06,2.19578e+06,2.19914e+06,2.19227e+06,2.18172e+06,2.17807e+06,2.13657e+06,2.1782e+06,2.17866e+06,2.17966e+06,2.18304e+06,2.164e+06,2.16551e+06,2.18455e+06,2.21613e+06,2.23007e+06,2.20362e+06,2.15721e+06],name: 'C(not compute%)',mode:'lines',line:{color:'rgba(0,255,0,1.0)', width:1}
},{x:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],y:[1.73368e+06,1.7177e+06,1.73919e+06,1.77098e+06,1.73918e+06,1.79425e+06,1.80261e+06,1.72385e+06,1.74031e+06,1.75688e+06,1.72798e+06,1.75521e+06,1.73559e+06,1.69374e+06,1.75375e+06,1.73601e+06,1.74284e+06,1.7421e+06,1.7559e+06,1.72865e+06,1.72173e+06,1.73715e+06,1.7045e+06,1.74061e+06,1.72494e+06,1.73698e+06,1.79336e+06,1.76068e+06,1.77254e+06,1.75864e+06,1.72996e+06,1.73397e+06,1.75313e+06,1.7325e+06,1.72432e+06,1.76923e+06,1.78421e+06,1.74033e+06,1.76e+06,1.73319e+06,1.73419e+06,1.74376e+06,1.7917e+06,1.75951e+06,1.82147e+06],name: 'G(not compute%)',mode:'lines',line:{color:'rgba(0,0,255,1.0)', width:1}
},];
var layout={title:'', xaxis:{title:'position'}, yaxis:{title:'base content ratios'}};
Plotly.newPlot('plot_tail_seq_pos_count__read1__base_contents', data, layout);
</script>

<script type="text/javascript">
var data=[{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.280678,0.279873,0.277571,0.277423,0.27776,0.273102,0.272893,0.27926,0.275778,0.2779,0.278318,0.273612,0.275736,0.281034,0.272947,0.278141,0.278861,0.279657,0.276987,0.281068,0.278446,0.278286,0.278925,0.277748,0.278062,0.276173,0.273547,0.276606,0.276304,0.275963,0.276622,0.28015,0.274439,0.281868,0.278989,0.272672,0.27143,0.276831,0.27591,0.27868,0.278013,0.275561,0.265816,0.286009,0.264867],name: 'A',mode:'lines',line:{color:'rgba(128,128,0,1.0)', width:1}
},{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.219082,0.223961,0.222164,0.218969,0.221415,0.21676,0.220459,0.219616,0.220295,0.21798,0.219933,0.222316,0.22009,0.221766,0.225916,0.21831,0.218153,0.21711,0.220046,0.216837,0.221625,0.219916,0.22476,0.225272,0.22886,0.219186,0.222009,0.220863,0.217482,0.219209,0.223113,0.220413,0.224122,0.224634,0.223263,0.223791,0.222997,0.222762,0.223603,0.22406,0.222169,0.219375,0.221226,0.208512,0.227672],name: 'T',mode:'lines',line:{color:'rgba(128,0,128,1.0)', width:1}
},{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.279117,0.277081,0.27844,0.277728,0.279001,0.28129,0.276734,0.281256,0.281959,0.280038,0.281354,0.280204,0.282807,0.281171,0.277454,0.28213,0.280694,0.281036,0.27901,0.281614,0.280331,0.280234,0.278914,0.274973,0.273071,0.283098,0.27571,0.27795,0.280102,0.280508,0.279615,0.278273,0.27782,0.272519,0.277819,0.277879,0.278006,0.278437,0.276008,0.2762,0.278629,0.282656,0.284435,0.281061,0.275141],name: 'C',mode:'lines',line:{color:'rgba(0,255,0,1.0)', width:1}
},{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.221123,0.219085,0.221826,0.225879,0.221824,0.228848,0.229914,0.219868,0.221968,0.224082,0.220395,0.223868,0.221367,0.216028,0.223683,0.221419,0.222291,0.222197,0.223957,0.220481,0.219598,0.221565,0.2174,0.222006,0.220007,0.221543,0.228734,0.224581,0.226111,0.224321,0.220649,0.221164,0.223618,0.22098,0.219929,0.225658,0.227568,0.221971,0.22448,0.22106,0.221188,0.222408,0.228523,0.224417,0.23232],name: 'G',mode:'lines',line:{color:'rgba(0,0,255,1.0)', width:1}
},];
var layout={title:'', xaxis:{title:'Position in read from end',autorange:'reversed'}, yaxis:{title:'Frequency of nucleotide in read'}};
Plotly.newPlot('plot_read1__tail_seq_pos_count__base_contents', data, layout);
</script>

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>rabbitQC report at 2019-05-12      16:09:02 </title>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<!-- 可以添加 css  -->
</head>

<body>
<!-- plot 1  -->
<div id='Length_figure'>
<div class='figure' id='plot_length' style='height:400px;'></div>
</div>
<script type="text/javascript">
var data=[{x:[93,92,91,94,100,95,97,96],y:[115,129,108,327,7625333,8985,171446,33921],name: 'Read length',type:'bar',line:{color:'rgba(128,0,128,1.0)', width:1}
}];
var layout={title:'Length_figure rate %', xaxis:{title:'x zhou'}, yaxis:{title:'y zhou'}};
Plotly.newPlot('plot_length', data, layout);
</script>



<div class='subsection_title'><a title='click to hide/show' onclick=showOrHide('read1__tail_seq_pos_count__base_contents')>read1: tail_seq_pos_count: base contents</a></div>
<div id='read1__tail_seq_pos_count__base_contents'>
<div class='sub_section_tips'>Value of each position will be shown on mouse over.</div>
<div class='figure' id='plot_read1__tail_seq_pos_count__base_contents'></div>
</div>

<script type="text/javascript">
var data=[{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.280678,0.279873,0.277571,0.277423,0.27776,0.273102,0.272893,0.27926,0.275778,0.2779,0.278318,0.273612,0.275736,0.281034,0.272947,0.278141,0.278861,0.279657,0.276987,0.281068,0.278446,0.278286,0.278925,0.277748,0.278062,0.276173,0.273547,0.276606,0.276304,0.275963,0.276622,0.28015,0.274439,0.281868,0.278989,0.272672,0.27143,0.276831,0.27591,0.27868,0.278013,0.275561,0.265816,0.286009,0.264867],name: 'A',mode:'lines',line:{color:'rgba(128,128,0,1.0)', width:1}
},{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.219082,0.223961,0.222164,0.218969,0.221415,0.21676,0.220459,0.219616,0.220295,0.21798,0.219933,0.222316,0.22009,0.221766,0.225916,0.21831,0.218153,0.21711,0.220046,0.216837,0.221625,0.219916,0.22476,0.225272,0.22886,0.219186,0.222009,0.220863,0.217482,0.219209,0.223113,0.220413,0.224122,0.224634,0.223263,0.223791,0.222997,0.222762,0.223603,0.22406,0.222169,0.219375,0.221226,0.208512,0.227672],name: 'T',mode:'lines',line:{color:'rgba(128,0,128,1.0)', width:1}
},{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.279117,0.277081,0.27844,0.277728,0.279001,0.28129,0.276734,0.281256,0.281959,0.280038,0.281354,0.280204,0.282807,0.281171,0.277454,0.28213,0.280694,0.281036,0.27901,0.281614,0.280331,0.280234,0.278914,0.274973,0.273071,0.283098,0.27571,0.27795,0.280102,0.280508,0.279615,0.278273,0.27782,0.272519,0.277819,0.277879,0.278006,0.278437,0.276008,0.2762,0.278629,0.282656,0.284435,0.281061,0.275141],name: 'C',mode:'lines',line:{color:'rgba(0,255,0,1.0)', width:1}
},{x:[45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],y:[0.221123,0.219085,0.221826,0.225879,0.221824,0.228848,0.229914,0.219868,0.221968,0.224082,0.220395,0.223868,0.221367,0.216028,0.223683,0.221419,0.222291,0.222197,0.223957,0.220481,0.219598,0.221565,0.2174,0.222006,0.220007,0.221543,0.228734,0.224581,0.226111,0.224321,0.220649,0.221164,0.223618,0.22098,0.219929,0.225658,0.227568,0.221971,0.22448,0.22106,0.221188,0.222408,0.228523,0.224417,0.23232],name: 'G',mode:'lines',line:{color:'rgba(0,0,255,1.0)', width:1}
},];
var layout={title:'', xaxis:{title:'Position in read from end',autorange:'reversed'}, yaxis:{title:'Frequency of nucleotide in read'}};
Plotly.newPlot('plot_read1__tail_seq_pos_count__base_contents', data, layout);
</script>


</body>

</html>