英文:
Plotly uirevision doesn't work on plotly.js-basic-dist-min?
问题
我正在尝试构建 Plotly 图表，在动态添加数据时不重置图表。
我正在使用 buddy.works 作为部署引擎，而且我有内存限制，所以必须使用 "plotly.js-basic-dist-min" 版本。
这是我想要实现的效果：https://codepen.io/plotly/pen/ebMJEW。
但在使用 dist-min 版本时遇到了问题，因为 uirevision 在以下情况下可以正常工作：
import Plot from 'react-plotly.js';
但在以下情况下无法工作：
import createPlotlyComponent from "react-plotly.js/factory";
var Plotly = require('plotly.js-basic-dist-min');
是否有其他方法？我有遗漏什么吗？谢谢！
以下是您的完整代码：
import React, { useEffect, useState } from 'react';
import './App.css';
import createPlotlyComponent from "react-plotly.js/factory";
var Plotly = require('plotly.js-basic-dist-min')
function App() {
const Plot = createPlotlyComponent(Plotly);
const [data, setData] = useState<any>({
x: [],
y: [],
type: 'scatter'
})
useEffect(() => {
let x: any = []
let y: any = []
let i = 1;
let interval = setInterval(() => {
x = [...x, i]
y = [...y, Math.floor(Math.random() * 10) + 1]
setData({
x: x,
y: y,
type: 'scatter'
})
i++
}, 5000)
return () => {
clearInterval(interval);
}
}, [])
return (
<div className="App">
<Plot
data={[data]}
config={{ scrollZoom: false, responsive: true, displaylogo: false }}
useResizeHandler={true}
style={{ width: "100%", height: "100%" }}
layout={{
title: 'User Zoom Persists<br>When uirevision Unchanged',
uirevision: 'true',
xaxis: { autorange: true },
yaxis: { autorange: true }
}}
/>
</div>
);
}
export default App;
请注意，我只提供了代码部分的翻译，没有包括问题的回答。如果您有其他问题或需要更多帮助，请随时提出。
英文:
I'm trying to build Plotly chart where it shouldn't reset chart when dynamically adding data.
I'm using buddy.works as deploy engine and i have limited ram so had to use " plotly.js-basic-dist-min"
this is what I'm trying to achieve https://codepen.io/plotly/pen/ebMJEW .
but I'm facing problem while using dist-min version. as uirevision works fine on
import Plot from 'react-plotly.js';
but it doesn't work for
import createPlotlyComponent from "react-plotly.js/factory";
var Plotly = require('plotly.js-basic-dist-min')
Is there any other way? did i miss something? Thanks!
here's my full code
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
import React, { useEffect, useState } from 'react';
import './App.css';
import createPlotlyComponent from "react-plotly.js/factory";
var Plotly = require('plotly.js-basic-dist-min')
function App() {
const Plot = createPlotlyComponent(Plotly);
const [data, setData] = useState<any>({
x:[],
y:[],
type:'scatter'
})
useEffect(()=>{
let x:any=[]
let y:any=[]
let i=1;
let inval = setInterval(()=>{
x= [...x, i]
y= [...y, Math.floor(Math.random() * 10) + 1]
setData({
x:x,
y:y,
type:'scatter'
})
i++
}, 5000)
return ()=>{
clearInterval(inval);
}
},[])
return (
<div className="App">
<Plot
data={[data]}
config={{ scrollZoom: false, responsive: true, displaylogo: false}}
useResizeHandler={true}
style={{ width: "100%", height: "100%" }}
layout={{
title: 'User Zoom Persists<br>When uirevision Unchanged',
uirevision:'true',
xaxis: {autorange: true},
yaxis: {autorange: true}
}}
/>
</div>
);
}
export default App;
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
答案1
得分: 0
moving const Plot = createPlotlyComponent(Plotly); outside function fix it.
英文:
moving const Plot = createPlotlyComponent(Plotly); outside function fix it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论