プロットを使用した動的ヒートマップ

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は、プロットが描かれているdivのdata属性にプロットのdataを格納します。あなたはそれを操作して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);

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