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