Я пытаюсь анимировать тепловую карту, используя Plotly, используя этот учебник. https://plot.ly/javascript/animations/#animating-many-frames-quickly. До сих пор я определил матрицу rho , содержащую 100 x 100 записей, которые обновляются с использованием compute () function:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph" style="position: relative; width: 600px; height: 500px;"></div>
<script>
/* Define matrix that represents physical quantity */
var rho = [];
for(var n=0; n<100; n++) {
rho[n] = [];
for(var l=0; l<100; l++) {
rho[n][l] = n * l;
}
}
var dummy = 1;
var data = [
{
z: rho,
type: 'heatmap'
}
];
Plotly.newPlot('graph', data);
function compute(){
dummy++;
for(n = 0; n < 100; n++)
{
for(l = 0; l < 100; l++)
{
data[0].z[n][l] = Math.sin(0.2 * (n * l- 0.05 * dummy) );
}
}
}
function update() {
compute();
Plotly.animate('graph', {data: [{z: rho,type: 'heatmap'}]},
{transition: {duration: 0}, frame: {duration: 0, redraw: false}}
)
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
</body>
</html>
На странице отобразится элемент сюжета, а терминал / отладчик Firefox выведет только несвязанную ошибку:
The character encoding of the HTML document was not declared.
Однако,график не показывает, не берите в голову анимацию.Я вижу, что значения rho обновляются курсором мыши.
Почему анимация не видна?
Спасибо