如果您可以定义像素的离散值范围(例如最小值0和最大值10),则可以将threshold
定义为百分比值,并使用它来定义自定义colorscale
.
const min = 0;
const max = 10;
const z = Array.from({length: 100}, () => Array.from({length: 100}, () => Math.floor(Math.random() * max)));
const threshold = 5; // value included in the highlighted range
const breakpoint = threshold / max; // (percentage from 0.0 to 1.0)
const colorscaleValue = [
[0.0, 'white'],
[breakpoint, 'white'],
[breakpoint, 'red'],
[1, 'red']
];
Plotly.newPlot('plot', [{z: z, type: 'heatmap', colorscale: colorscaleValue}]);
<script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
<div id="plot"></div>
如您所见,范围前半部分(50%,不包括0到5个像素)的所有值将显示为白色,而高于50%(包括5到10,5个像素)的值将显示为红色.在我的示例中,我只使用两种 colored颜色 来定义高于和低于阈值的值.如果要使用不同的色标,可以try 执行以下操作:
const min = 0;
const max = 10;
const z = Array.from({length: 250}, () => Array.from({length: 500}, () => Math.floor(Math.random() * 10)));
const threshold = 5; // value included in the highlighted range
const breakpoint = threshold / max; // (percentage from 0.0 to 1.0)
const colorscaleValue = [
[0.0, 'rgba(169,169,169,0.5)'],
[breakpoint, 'rgba(169,169,169,0.5)'],
[breakpoint, 'rgb(220,170,132)'],
[1, 'rgb(178,10,28)'],
];
Plotly.newPlot('plot', [{z: z, type: 'heatmap', colorscale: colorscaleValue}]);
<script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
<div id="plot"></div>
当然,您可以在colorscale
中设置任意数量的"断点",请记住,值的范围是从0.0
到1.0
,并且它们以百分比表示值范围.