Question

我在下面的小提琴https://jsfiddle.net/9ds7mryr/5/

中使用了一个带注释的热图

我的目的是为三个单独的范围设置三种颜色

<0.75 #FFA500
>0.75 and <0.90 rgb(255,0,0)
>0.90 #F0E7E7

但是，现在我为某些值获得了相同的颜色，即使它们稍有不同也是如此。

如何确保相同范围的值具有相同的颜色？

Answer 1

尝试将colorscale更改为

[
  [0, '#FFA500'],
  [0.1, '#FFA500'],
  [0.2, '#FFA500'],
  [0.3, '#FFA500'],
  [0.4, '#FFA500'],
  [0.74,'#FFA500'],
  [0.75, 'rgb(255,0,0)'],
  [0.89, 'rgb(255,0,0)'],
  [0.90, '#F0E7E7'],
  [0.95, '#F0E7E7'],
  [1, '#F0E7E7']
]

colorscale需要介于0和1之间，即您的值会自动标准化为介于这些值之间。由于您的值开始高于0且低于1，因此它们将被移位。您可以使用zmin和zmax更改此行为。

＆＃13;

var xValues = ['A', 'B', 'C', 'D', 'E', 'max', 'min'];

var yValues = ['W'];

var zValues = [
  [0.80, 0.110, 0.220, 0.74, 0.90, 1, 0]
];

var colorscaleValue = [
  [0, '#FFA500'],
  [0.1, '#FFA500'],
  [0.2, '#FFA500'],
  [0.3, '#FFA500'],
  [0.4, '#FFA500'],
  [0.74,'#FFA500'],
  [0.75, 'rgb(255,0,0)'],
  [0.89, 'rgb(255,0,0)'],
  [0.90, '#F0E7E7'],
  [0.95, '#F0E7E7'],
  [1, '#F0E7E7']
];



var data = [{
  x: xValues,
  y: yValues,
  z: zValues,
  type: 'heatmap',
  colorscale: colorscaleValue,
  showscale: true,
}];

var layout = {
  title: 'Annotated Heatmap',
  annotations: [],
  xaxis: {
    ticks: '',
    side: 'top'
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    width: 700,
    height: 700,
    autosize: true
  }
};


Plotly.newPlot('myDiv', data, layout);

＆＃13;

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

＆＃13;

具有颜色的热图，每个用于绘制多个值范围

1 个答案: