热图，每个颜色都用于绘图中的多个值范围答案

【问题标题】：Heatmap with colour each for multiple ranges of values in plotly热图，每个颜色都用于绘图中的多个值范围
【发布时间】：2016-08-13 18:39:15
【问题描述】：

我在下面的小提琴 https://jsfiddle.net/9ds7mryr/5/ 中有一个使用 plotly 的带注释的热图

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

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

但是，现在我得到的某些值的颜色相同，即使它们略有不同。

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

【问题讨论】：

答案解决了你的问题吗？

标签： javascript plotly

【解决方案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 更改此行为。

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);

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

【讨论】：