動態地圖使用情節

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存儲在div的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>