问题标签 [plotly-react]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
356 浏览

javascript - 如何根据我的色标为这个 Plotly Scatter Plot Surface 着色?

这个codepen对我尝试为由3d散点图形成的插值表面着色的尝试进行了最小的复制:https ://codepen.io/salazarm/pen/jOWprBj

我尝试了几种不同的方法,甚至在阅读源代码时也一直在谷歌搜索,但我似乎无法弄清楚如何根据我的色标为表面和点着色。

0 投票
0 回答
309 浏览

reactjs - plotly onClick 事件导致 React 中的无限渲染循环

运行使用事件属性的 onClick 处理程序会导致反应中的无限循环:

无限渲染循环

0 投票
1 回答
205 浏览

javascript - 从 js 文件调用数据以响应组件

我的 src/assets 文件夹中有一个包含一些数据的 js 文件。我需要将该数据调用到我的反应组件中,以将其显示在 PLotly.js 的图表中

我曾尝试调用数据,但一直收到错误消息,提示找不到路径。我应该把它变成一个json文件吗?

我的数据文件:

反应组件:

0 投票
1 回答
227 浏览

plotly.js - Plotly.js scattergl 不显示图形本身

为了可视化大量数据点 +9000 个标记,我将从 Plotly.js 的“scatter”类型切换到“scattergl”。

我使用 react-plotly.js,从 'scatter' 到 'scattergl' 的变化几乎可以工作。除了标记本身,一切都很好。轴、悬停指示、缩放控件……都可以工作。

屏幕截图显示了差异。关于 scattergl 的文档很难找到,但我只是缺少一些 gl 特定的配置吗?

类型分散

输入 scattergl

我计算痕迹的代码:

0 投票
0 回答
35 浏览

plotly.js - plotly-react 在更新期间变得无响应

我使用 react hooks 和 react-plotly 来渲染一个非常简约的散点图,每 200 个点有 100 条轨迹。

正在流式传输的全局状态使用“hookstate”保存

根据这个例子应该很容易更新:https ://codepen.io/rhamner/pen/JBOExK?editors=0010

但不是反应情节。它完全使我的浏览器无响应。

我试图检查组件本身有多少次重新渲染,是的,组件在每次更新时都会渲染。然而,我只想更新情节组件。

0 投票
0 回答
182 浏览

javascript - ReactJS-Plotly 图表未完全填充容器

我目前正在使用 React-Plotly,我的图表似乎总是在每个图表周围都有一个空白区域,比如边距。我试图在情节中专门设置没有边距,使用 CSS,我也将自动大小和响应都设置为 true。检查组件时,它似乎也没有边距,图表的组件似乎比 小得多,正如我将在屏幕截图中演示的那样。

MainPage.js - 此文件包含加载到图中的组件。

ChartContainer.js - 此文件根据道具加载到特定的图表组件中。

所有图表都表现出相同的行为,所以我只记录其中的 1 个。

LineChart.js

接下来,我将展示组件的屏幕截图。(图片链接在下面)在第一张图片中,您可以看到我希望图表填充的大突出区域,除了中间的实际图表要小得多,并且周围似乎有一层边距图本身。这在代码中被指定为 0,并且您还可以看到这里没有绿色或橙色高亮显示,表示没有填充或边距。

在第二张图中,您可以看到 plotly 图表的文件结构。高光保持与第一张图片相同,直到图层。上面的层,仍然像第一层一样占据适当的大容器。我希望突出显示图形本身的图层填充更大的容器。请注意,此行为也与所有其余图表保持一致。感谢您抽出宝贵时间阅读本文,请随时放弃任何可以提供帮助的评论或问题。

显示需要填充的较大容器。

显示图形占用的区域太小

如何将内部图形的大小推到外部容器?

0 投票
0 回答
38 浏览

javascript - Plotly react. The annotation disappears after changing border color

I have a plotly graph with several annotations with an extra UUID parameter. I also have a list of these annotations and what I want is that the annotation I select on the list changes its border color. The function I'm using to change the border color is the following:

However, when I click an annotation on the list, the corresponding one on the graph disappears, only to appear again when I change the graph size manually. Here are some screenshots:

Plot before selecting any note

Plot before selecting any note

Plot after selecting one-note

Plot after selecting one note

Plot after resizing the window, now the note is back and with new border color

Plot after resizing the window, now the note is back and with new border color

Any ideas about what's going on? Thanks!

0 投票
1 回答
15 浏览

reactjs - 使用 react-plotly.js 更改 plotly.js 中饼图切片的颜色

我想更改 Piechart 切片的颜色,我参考了 plotly 的文档并添加了

也是,但它不工作

0 投票
0 回答
15 浏览

reactjs - 在图例中显示标签和值:plotly.js

现在我当前的图表行为是这样的

现在的进展

这是一个反应组件

我的预期行为是,图例(饼图信息)也应该显示标签各自的值

健康:60 轻度:10

饼图代码