Question

我已经使用react-ploty.js创建了一个条形图。当在栏上执行onClick事件时，我想更改图表的宽度，为此，我尝试使用Plotly的relayout方法重置宽度。但是，当我尝试这样做时，会引发未捕获的ReferenceError：未定义Plotly错误。我创建情节的方式是：

import Plot from 'react-plotly.js';

<Plot
  data={this.prepData(this.state.chartData)}
  onClick={(data) => {this.chartRelayout();}
  type={'bar'}
  layout={layout}/>

chartRelayout () {
        console.log("Relayout called");
        Plotly.relayout({
            width: 0.5 * window.innerWidth
        });
    }

我缺少任何进口吗？我什至试图做plot.relayout并为此得到同样的错误。任何帮助将不胜感激。谢谢！

Answer 1

此文件中没有任何东西可以为Plotly对象提供上下文，这就是为什么它未定义的原因。

在第2行上，尝试编写import Plotly from 'plotly.js';。另外，您的package.json是什么样的？确保已安装react-plotly.js和plotly.js：$ npm install react-plotly.js plotly.js。

这些软件包以.js结尾，因此有可能您错过了在安装过程中添加的内容。

Answer 2

是的，您缺少导入，尚未导入Plotly或在当前文件中未引用它，这就是您获得

的原因。

未捕获的ReferenceError：未定义情节

您仅导入了Plot

import Plot from 'react-plotly.js';

详细介绍了here如何为Webpack项目安装plotly.js，从而使您可以访问Plotly对象。

遵循这些instructions之后，您就可以了。

import Plotly from 'plotly.js/dist/plotly'

但是，您仍然可以使用当前的react-plotly.js来调整小节的大小，因为

时它已经调用了Plotly.react函数

数据，布局或配置之一已更改身份，如通过浅===
检查的

现在您所要做的就是将布局数据定义为您的状态，以便当我们更改布局属性时，将使用新的布局属性再次渲染图。

将布局添加到状态。

constructor(props) {
        super(props);
        this.state = { layout: {...}};
    }

chartRelayout () {
        this.setState({
           layout: {width: 0.5 * window.innerWidth}
        })
    }

<Plot
  data={this.prepData(this.state.chartData)}
  onClick={(data) => {this.chartRelayout();}
  type={'bar'}
  layout={this.state.layout}/>

这使“ react-plotly.js”可以按react-plotly.js库的预期处理对下划线“ plotly.js”库的调用

无法将中继方法应用于图表react-plotly.js

2 个答案: