Plotly uirevision 在 plotly.js-basic-dist-min 上不起作用。

huangapple
go评论97阅读模式
英文:

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 在以下情况下可以正常工作：

  1. import Plot from 'react-plotly.js';

但在以下情况下无法工作：

  1. import createPlotlyComponent from "react-plotly.js/factory";
  2. var Plotly = require('plotly.js-basic-dist-min');

是否有其他方法？我有遗漏什么吗？谢谢！

以下是您的完整代码：

  1. import React, { useEffect, useState } from 'react';
  2. import './App.css';
  3. import createPlotlyComponent from "react-plotly.js/factory";
  4. var Plotly = require('plotly.js-basic-dist-min')
  6. function App() {
  7.   const Plot = createPlotlyComponent(Plotly);
  8.   const [data, setData] = useState<any>({
  9.     x: [],
  10.     y: [],
  11.     type: 'scatter'
  12.   })
  13.   useEffect(() => {
  14.     let x: any = []
  15.     let y: any = []
  16.     let i = 1;
  17.     let interval = setInterval(() => {
  18.       x = [...x, i]
  19.       y = [...y, Math.floor(Math.random() * 10) + 1]
  20.       setData({
  21.         x: x,
  22.         y: y,
  23.         type: 'scatter'
  24.       })
  25.       i++
  26.     }, 5000)
  27.     return () => {
  28.       clearInterval(interval);
  29.     }
  30.   }, [])
  31.   return (
  32.     <div className="App">
  33.       <Plot
  34.         data={[data]}
  35.         config={{ scrollZoom: false, responsive: true, displaylogo: false }}
  36.         useResizeHandler={true}
  37.         style={{ width: "100%", height: "100%" }}
  38.         layout={{
  39.           title: 'User Zoom Persists<br>When uirevision Unchanged',
  40.           uirevision: 'true',
  41.           xaxis: { autorange: true },
  42.           yaxis: { autorange: true }
  43.         }}
  44.       />
  45.     </div>
  46.   );
  47. }
  49. 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

  1. import Plot from &#39;react-plotly.js&#39;;

but it doesn't work for

  1. import createPlotlyComponent from &quot;react-plotly.js/factory&quot;;
  2. var Plotly = require(&#39;plotly.js-basic-dist-min&#39;)

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 -->

  1. import React, { useEffect, useState } from &#39;react&#39;;
  2. import &#39;./App.css&#39;;
  3. import createPlotlyComponent from &quot;react-plotly.js/factory&quot;;
  4. var Plotly = require(&#39;plotly.js-basic-dist-min&#39;)
  5. function App() {
  6. const Plot = createPlotlyComponent(Plotly);
  7. const [data, setData] = useState&lt;any&gt;({
  8. x:[],
  9. y:[],
  10. type:&#39;scatter&#39;
  11. })
  12. useEffect(()=&gt;{
  13. let x:any=[]
  14. let y:any=[]
  15. let i=1;
  16. let inval = setInterval(()=&gt;{
  17. x= [...x, i]
  18. y= [...y, Math.floor(Math.random() * 10) + 1]
  19. setData({
  20. x:x,
  21. y:y,
  22. type:&#39;scatter&#39;
  23. })
  24. i++
  25. }, 5000)
  26. return ()=&gt;{
  27. clearInterval(inval);
  28. }
  29. },[])
  30. return (
  31. &lt;div className=&quot;App&quot;&gt;
  32. &lt;Plot
  33. data={[data]}
  34. config={{ scrollZoom: false, responsive: true, displaylogo: false}}
  35. useResizeHandler={true}
  36. style={{ width: &quot;100%&quot;, height: &quot;100%&quot; }} 
  37. layout={{
  38. title: &#39;User Zoom Persists&lt;br&gt;When uirevision Unchanged&#39;,
  39. uirevision:&#39;true&#39;,
  40. xaxis: {autorange: true},
  41. yaxis: {autorange: true}
  42. }}
  43. /&gt;
  44. &lt;/div&gt;
  45. );
  46. }
  47. export default App;

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

答案1

得分: 0

moving const Plot = createPlotlyComponent(Plotly); outside function fix it.

英文:

moving const Plot = createPlotlyComponent(Plotly); outside function fix it.

huangapple
  • 本文由 发表于 2023年2月6日 16:09:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/75358757.html
  • plotly
  • plotly.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定