PlotlyJS - 在Surface Plot中设置类别轴的长度

时间:2017-06-27 13:34:53

标签: javascript plotly

我正在尝试手动设置类别轴的长度。详细地说,我希望x轴的长度等于y轴的长度。到目前为止,我尝试了plotly manual的各种布局设置而没有结果。

var layout = {
  width: 400,
  height: 300,
  plot_bgcolor: '#98ff6d',
};

var data = [{
  z: [
    [1, 20, 10, 12, 1, 1, 20, 10, 12, 1],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 20, 20, 12, 0],
    [1, 20, 10, 12, 1, 13, 20, 0, 12, 21],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 20, 10, 1, 12],
    [1, 20, 10, 12, 1, 1, 20, 10, 12, 14],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 13, 4, 12, 16, 1, 21, 20, 0, 18],
    [1, 20, 0, 12, 1, 21, 65, 10, 12, 1],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 20, 10, 15, 0],
    [1, 20, 10, 12, 1, 1, 30, 10, 12, 14],
    [24, 13, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 29, 1, 19, 31],
    [1, 20, 10, 12, 1, 31, 0, 10, 12, 19],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 20, 10, 11, 21],
    [1, 0, 10, 12, 1, 1, 10, 10, 12, 21],
    [24, 1, 0, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 20, 1, 19, 36],
    [1, 20, 10, 12, 1, 21, 21, 10, 12, 31],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 12, 4, 12, 16, 1, 21, 43, 12, 18],
    [1, 20, 10, 12, 1, 1, 39, 10, 12, 13],
    [24, 1, 12, 19, 0, 1, 20, 12, 2, 1],
    [8, 1, 4, 12, 16, 1, 20, 10, 1, 11],
    [1, 20, 10, 12, 1, 19, 38, 10, 12, 16],
    [24, 12, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 1, 4, 12, 16, 1, 29, 4, 12, 3],
    [1, 20, 0, 12, 1, 1, 23, 10, 12, 11],
    [24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
    [8, 19, 4, 12, 16, 1, 20, 10, 12, 19],
    [1, 20, 10, 12, 1, 1, 24, 10, 12, 0],
    [24, 1, 12, 19, 023, 1, 22, 10, 12, 1],
    [8, 1, 41, 12, 16, 1, 20, 10, 12, 11]
  ],
  x: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10'],
  y: ['Messung 1', 'Messung 2', 'Messung 3',
    'Messung 4', 'Messung 5', 'Messung 6',
    'Messung 7', 'Messung 8', 'Messung 9',
    'Messung 10', 'Messung 11', 'Messung 12',
    'Messung 13', 'Messung 14', 'Messung 15',
    'Messung 16', 'Messung 17', 'Messung 18',
    'Messung 19', 'Messung 20', 'Messung 21',
    'Messung 22', 'Messung 23', 'Messung 24',
    'Messung 25', 'Messung 26', 'Messung 27',
    'Messung 28', 'Messung 29', 'Messung 30',
    'Messung 31', 'Messung 32', 'Messung 33',
    'Messung 34', 'Messung 35', 'Messung 36'
  ],
  type: 'surface'
}];

Plotly.newPlot('plot', data, layout, {
  displayModeBar: true,
  displaylogo: false
});
#plot {
  height: 100vh, width:100vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>


<div id="plot"></div>

1 个答案:

答案 0 :(得分:0)

layout对象设为scene,并在rangeaxis和(如果您愿意){{1}上设置所需的yaxis属性。 E.g。

zaxis
在CodePen上

Plotly has a working example(显示更多布局选项的使用)。