javascript - PlotlyJS - 设置曲面图中类别轴的长度

Question

我正在尝试手动设置类别轴的长度。详细来说，我希望 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>

Answer 1

为您的布局对象提供一个场景，并在其轴上设置所需的范围， yaxis 和(如果您愿意)zaxis 属性。例如

var MIN_VAL = -100, MAX_VAL = 100;
var layout = {
    scene:{
        axis: {
            nticks: 10,
            range: [ MIN_VAL, MAX_VAL ]
        },
        yaxis: {
            nticks: 10,
            range: [ MIN_VAL, MAX_VAL ]
        },
        zaxis: {
            nticks: 7,
            range: [ MIN_VAL, MAX_VAL ]
        },
        aspectmode: "manual",
        aspectratio: { x: 1, y: 1, z: 0.7 },
        bgcolor : '#98ff6d'
    },
    autosize: false,
    width: 400,
    height: 300,
    margin: { l: 0, r: 0, b: 50, t: 50, pad: 4 }
};
Plotly.newPlot('plot', data, layout);

Plotly has a working example (这显示了更多布局选项的使用)在 CodePen 上。