我正在尝试使用本教程的 Plotly 为热图制作动画 https://plot.ly/javascript/animations/#animating-many-frames-quickly 。到目前为止，我定义了一个矩阵 rho，包含 100 x 100 个条目，并使用 compute() 函数更新:
<!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>
页面将显示plot元素，Firefox终端/调试器将仅输出不相关的错误:
The character encoding of the HTML document was not declared.
但是，图表不显示，更不用说动画了。我可以看到 rho 的值正在通过鼠标光标更新。
为什么动画不可见？
谢谢
最佳答案
您需要在update中定义rho。见下文。
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'
}
];
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) );
}
}
}
Plotly.newPlot('graph', data);
function update() {
compute();
rho = data[0].z;
Plotly.animate('graph',
{data: [{z: rho, type: 'heatmap'}]},
{transition: {duration: 750},
frame: {duration: 1000, redraw: true}})
requestAnimationFrame(update);
}
requestAnimationFrame(update);<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>关于javascript - Plotly.js - 热图动画未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52895691/