plotly / plotly/react-plotly.js
How can I use animate method ?
未關閉
還沒有人認領這個 Issue。
- 主要語言
- JavaScript
- 星號
- 1.1k
- 分支
- 138
- 平均合併
- 3 天 2 小時
- 30 天內合併 PR
- 4
描述
Plotly.animate("myDiv", { data: finalData }, { ...animationConfig });
Plotly.animate can be used with some css transtion effects, but there is no such method in react-plotly.js, how can I use this method ?thank you!
Here is a demo use animate
const animationConfig = {
transition: {
duration: 1000,
easing: "cubic-in-out"
},
frame: {
duration: 1000
}
};
// Initial Plot for Animation
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const initialData = [
{
x: numbers,
y: [0, 0, 0, 0, 0, 0, 0, 0, 0],
name: "square",
type: "bar"
},
{
x: numbers,
y: [0, 0, 0, 0, 0, 0, 0, 0, 0],
name: "cube",
type: "bar"
}
];
Plotly.newPlot("myDiv", initialData);
// Final Plot with Animation
const squares = numbers.map((x) => x * x);
const cubes = numbers.map((x) => x * x * x);
const trace1 = {
x: numbers,
y: squares,
name: "square",
type: "bar"
};
const trace2 = { x: numbers, y: cubes, name: "cube", type: "bar" };
const finalData = [trace1, trace2];
Plotly.animate("myDiv", { data: finalData }, { ...animationConfig });
貢獻指南
這個儲存庫沒有索引到貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
未指定任何儲存庫檔案或測試。首先將提供的 Plotly.animate 範例與 react-plotly.js API 進行比較,並確定 wrapper 的預期行為;done 應該是透過此程式庫使用動畫的一種已確定且可重現的方式,或是對其限制的文件化說明。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react
- 領域
- data-visualization, frontend
- Issue 類型
- 功能
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 停滯
- 描述清晰度
- 需要釐清
- 新手友好度
- 25/100