始终在 Plotly.js 热图中显示颜色条的最小值和最大值

Question

在此示例中：

const z = Array.from({length: 50}, () => Array.from({length: 50}, () => Math.floor(Math.random() * 500 + 47.2)));
Plotly.newPlot('plot',  [{z: z, type: 'heatmap'}]);

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

颜色条不能精确显示最小/最大值。这里我们只看到

100

、

200

、...、

500

，并且看不到接近

47.2

的最小值，具体取决于随机样本。

如何使用 Plotly 在颜色栏中显示最小/最大值？

Answer 1

您可以直接自定义跟踪数据中的

colorbar

。

基本上，您想要指定

tickvals

，这意味着您相应地设置

tickmode

，例如。类似的东西：

const z = Array.from({length: 50}, () => Array.from({length: 50}, () => Math.floor(Math.random() * 500 + 47.2)));

// Computed from z.flat() : [zmin, ...someRange, zmax]
const tickvals = [47, 100, 200, 300, 400, 500, 547]

const data =  [{
  z: z, 
  type: 'heatmap',
  colorbar: {
    tickmode: 'array',
    tickvals
  }
}];

Plotly.newPlot('plot', data);

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