Question

我在剧情中创建了一个简单的热图。下面是代码：

输入数据

var zValues = [
  [0.10, 0.30, 0.15, 0.25, 0.40],
  [0.20, 0.00, 0.75, 0.75, 0.00],
  [0.75, 0.75, 0.15, 0.65, 0.20],
  [0.50, 0.40, 0.00, 0.05, 0.10]
];

var data = [{
  x: xValues,
  y: yValues,
  z: zValues,
  type: 'heatmap',
  colorscale: colorscaleValue,
  showscale: true
}];

var layout = {
  title: 'Annotated Heatmap',
  annotations: [],
  xaxis: {
    ticks: '',
    side: 'bottom'
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    width: 700,
    height: 700,
    autosize: false
  }
};

for ( var i = 0; i < yValues.length; i++ ) {
  for ( var j = 0; j < xValues.length; j++ ) {
    var currentValue = zValues[i][j];
    if (currentValue != 0.0) {
      var textColor = 'white';
    }else{
      var textColor = 'black';
    }
    var result = {
      xref: 'x1',
      yref: 'y1',
      x: xValues[j],
      y: yValues[i],
      text: zValues[i][j],
      font: {
        family: 'Arial',
        size: 12,
        color: 'rgb(50, 171, 96)'
      },
      showarrow: false,
      font: {
        color: textColor
      }
    };
    layout.annotations.push(result);
  }
}

Plotly.newPlot('myDiv', data, layout);

现在我想在定期间隔后更新数据（zValues）（或重新洗牌数据），以便热图中的颜色可以根据新数据值不断变化。

怎么做？

Answer 1

Plotly将您的地图的data存储在绘制绘图的data的{{1}}属性中。您可以对其进行操作，然后调用div。

或者，您可以使用Plotly.redraw

Plotly.restyle

Plotly.restyle(myDiv, 'z', [new_data]);

var data = [{
  z: random_data(),
  x: [0, 1, 2],
  y: [0, 1, 2],
  type: 'heatmap'
}];

myDiv1 = document.getElementById('myDiv1');
myDiv2 = document.getElementById('myDiv2');

Plotly.newPlot('myDiv1', data);
Plotly.newPlot('myDiv2', data);

function random_data() {
  new_z = [];
  for (var i = 0; i < 3; i += 1) {
    new_z.push([]);
    for (var j = 0; j < 3; j += 1) {
      new_z[i].push(Math.random() * 100)
    }
  }
  return new_z
}

var interval1 = setInterval(function() {
  myDiv1.data.z = random_data();
  Plotly.redraw(myDiv1);
}, 1000);
var interval1 = setInterval(function() {
  Plotly.restyle(myDiv2, 'z', [random_data()]);
}, 1000);

动态热图使用plotly

1 个答案: