使用plotly.js動畫API動畫多條曲線API

我有一個plotly.js儀表板，用於流式傳輸實時數據。實時數據流部分工作得非常好，但我真的想在數據進入的同時對所有曲線進行動畫處理。但是，無論如何，我無法一次設置多於一條曲線的動畫效果我傳遞給Plotly.animate。我使用他們網站的代碼重新創建了這個問題。使用plotly.js動畫API動畫多條曲線API

<html> 
<head> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 

<body> 
    <div id="graph"></div> 
    <button onclick="javascript:randomize();">Randomize!</button> 
</body> 

<script> 
Plotly.plot('graph', [{ 
x: [1, 2, 3], 
y: [0, 0.5, 1], 
line: {simplify: false}, 
}, 
{ 
x: [3, 2, 1], 
y: [0, 0.5, 1], 
line: {simplify: false} 
}]); 

function randomize() { 
    Plotly.animate('graph', { 
    data: [{y: [Math.random(), Math.random(), Math.random()]}], 
    traces: [0,1], 
    layout: {} 
    }, { 
    transition: { 
    duration: 500, 
    ease: 'cubic-in-out' 
    } 
    }) 


    }</script> 
    </html>

觀察到，即使我將它傳遞給曲線[0,1]，它只會動畫該數組中的第一條曲線！我找不到任何可以解決此問題的文檔。

來源

2016-12-02 user7240099

我找到了答案。問題在於我傳遞給Plotly.animate的數據，它只有一條蹤跡的更新信息。

這裏如果有人想知道的工作代碼：

<html> 
<head> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 
<body> 
    <div id="graph"></div> 
    <button onclick="javascript:randomize();">Randomize!</button> 
</body> 

<script> 
Plotly.plot('graph', [{ 
    x: [1, 2, 3], 
    y: [0, 0.5, 1], 
    line: {simplify: false}, 
}, 
{ 
    x: [3, 2, 1], 
    y: [0, 0.5, 1], 
    line: {simplify: false} 
}]); 

function randomize() { 
    Plotly.animate('graph', { 
    data: [{y: [Math.random(), Math.random(), Math.random()]}, {y: [Math.random(), Math.random(), Math.random()]}], 
    traces: [0,1], 
    layout: {} 
    }, { 
    transition: { 
     duration: 500, 
     ease: 'cubic-in-out' 
    } 
    }) 


}</script> 
</html>

來源

2016-12-02 09:01:27 user7240099

使用plotly.js動畫API動畫多條曲線API

回答

相關問題