使用 Plotly 熱圖自定義 x 軸和 y 軸范圍

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+100聲望賞金。 Basj正在尋找一個規范的答案。

假設我們有一個 2x4 矩陣顯示在heatmap中（實際上它可以是 500x1000）：

 var data = [{z: [[1, 2, 3, 4], [5, 6, 7, 8]], type: 'heatmap'}]; Plotly.newPlot('myDiv', data, {xaxis: { ticksuffix: " mm" }}, {});

 <script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="myDiv"></div>

如何將x軸更改為自定義范圍，並保持plot全寬？

比如0 mm to 321 mm 321mm（單位是毫米），而不是-0.5mm to 3.5mm ？

PS：由於數據可能很大（500x1000 像素），我想避免在data本身中插入x, y值，因為它會使這個 object 大 3 倍（並且渲染速度足夠慢）。

Answer 1

您可以使用 function 縮放 x 軸標簽。

如果您想查看它正在計算的值，請取消注釋console.log()語句。

 var xValues = [10, 20, 30, 40]; var zValues = [[1, 2, 3, 4], [5, 6, 7, 8]]; var max = 321; var multiplier = max / (zValues[0].length - 1); var data = [{ z: zValues, type: 'heatmap', x: zValues[0].map(function(el, idx) { /* console.log(idx, idx * multiplier); */ return idx * multiplier; }), }]; Plotly.newPlot('myDiv', data, {xaxis: { ticksuffix: " mm" }}, {});

 <script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="myDiv"></div>

Answer 2

您可以使用 x 軸 object 的范圍屬性。此屬性采用兩個值的數組，表示 x 軸的最小值和最大值。

 var data = [{z: [[1, 2, 3, 4], [5, 6, 7, 8]], type: 'heatmap'}]; var layout = { xaxis: { range: [0, 321], ticksuffix: " mm" } }; Plotly.newPlot('myDiv', data, layout);

 <script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="myDiv"></div>