dynamische Heatmaps mit Plotly

Question

Ich habe eine einfache Heatmap in Plotly erstellt. unten ist der Code:

Eingangsdaten

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

Jetzt möchte ich die Daten (zValues) nach regelmäßigen Abständen aktualisieren (oder die Daten neu mischen), so dass die Farben in der Heatmap auf die Veränderung basierend auf halten sollte die neuen Datenwerte.

Wie geht das?

Answer 1

Plotly speichert die data Ihres Plots im data Attribut des div, wo das Diagramm gezeichnet wird. Sie können es manipulieren und dann Plotly.redraw aufrufen.

Alternativ können Sie 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);

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