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

问：

在此示例中：

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>

颜色条不能精确显示最小值/最大值。这里我们只看到、、、，而看不到接近的最小值，具体取决于随机样本。10020050047.2

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

JavaScript 热图绘图 .js

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>

谢谢@EricLavault！你有没有看到一种自动获得最小值和最大值以及最佳滴答值的方法？示例：最小值为 99，最大值为 402，则 [99， 100， 200， 300， 400， 402] 对于可读性而言不是最佳的，因为 99 和 100 将相互重叠。也许有一种内置的优化方式来显示滴答声？

0赞 EricLavault 11/7/2023

对于最小值/最大值，您可以这样做，但是 afaik 没有办法使行为包括 zmin/zmax。指定 tickvals 意味着我们事先计算它们，特别是 zmin 和 zmax 之间的范围。在示例中，范围步长为 100，这是首先要计算的内容，它取决于要显示的刻度数量级和最大刻度数;范围 start 或 tick0 （100）是 zmin 之后的第一步，如果小于相对于 dtick 的某个阈值，您可以将其排除在外......zmin = Math.min(...z.flat())tickmode="auto"dtickzmax - zmintick0 - zmin

0赞 EricLavault 11/7/2023

tick0、dtick 等，这是我正在使用的情节词汇，您可以参考文档来获得正确的含义。

上一个：如何在不失真的情况下将 Python DF 热图叠加在现有图像上

下一个：如何在QGIS中根据值而不是点的密度制作带有热图外观的地图？

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

Always show min and max of colorbar in a Plotly.js heatmap

评论

评论