Question

无法将布局方法应用于图表，react-plotly.js

2018-11-21

3716

reactjs plotly

我使用 react-ploty.js 创建了一个条形图。我想在条形图上执行 onClick 事件时更改图表的宽度，为此我尝试使用 Plotly 的layout 方法来重置宽度。但是当我尝试这样做时，它会抛出 Uncaught ReferenceError: Plotly is not defined 错误。我创建图的方式是：

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 ，也没有在当前文件中引用它，这就是您获得

Uncaught ReferenceError: Plotly is not defined

您仅导入了 Plot

import Plot from 'react-plotly.js';

其详细说明为这里如何为 webpack 项目安装 plotly.js ，从而使您能够访问 Plotly 对象。

按照这些说明操作后，您将只是。

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

但是你仍然可以使用当前的 react-plotly.js 实现条形图的大小调整，因为它已经在调用 Plotly.react 函数时

One of data, layout or config has changed identity as checked via a shallow ===

现在你所要做的就是将布局数据定义到你的状态中，这样当我们更改布局属性时，Plot将使用新的布局属性再次呈现。

将布局添加到状态。

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”库的调用

Answer 2

此文件中没有任何内容为 Plotly 对象提供上下文，这就是它未定义的原因。

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

这些包以 .js 结尾，因此您可能在安装过程中忘记添加它。

Answer 3

设置 layout.xaxis.range 和 layout.yaxis.range 字段应该可以解决问题。

ArthurAkhmerov

2024-04-22