javascript - 用于 plotly.js 图表的 React 和包装器

Question

我在使用 Plotly.js 的两个不同包装器时遇到问题:

react-plotlyjs 和 react-plotly

如果有人可以成功地让 react-plotly 或 react-plotlyjs 在 React 上工作(通过数据更新)，请告诉我，我已经被困了一天多了......

我没有问题让 chartjs 工作，但他们没有极坐标散点图。据我在网上看到的，只有 plotly.js 有免费的极坐标散点图。

我对 react-plotlyjs 包装器的问题是我无法更新模型数据。如果我这样做，就会出现一个有问题的空白图。

我对 react-plotly 的问题是，当我尝试获取源代码时可能会出错。出于某种原因，React.createClass 在 react-plotly 代码中崩溃了......

Uncaught TypeError: Cannot read property 'createClass' of undefined

这是相关的代码，它非常简单，足以让我的数据与 react-plotly 一起绘图，我只是无法更新绘图数据...

var React = require ('react');

var MyStore = require ('./stores/MyStore');

var MyForm = require ('./components/MyForm.jsx');

const Plotly = require('react-plotlyjs');

var trace1 = {
r: [6.80498578527, 3.38959601061, 5.38147211075, 8.05954021942, 5.31822922787, 2.98509993563, 1.96658700238, 6.76926540821, 4.07340189872, 6.50437182527, 7.556369819, 4.04745609407, 7.38666249607, 5.41362473698, 7.47071653116, 7.98211021694, 4.73781408009, 4.20645304293, 5.47860480459, 4.8245202807, 5.5996006099, 6.86679521708, 3.08567136626, 7.77181094323, 3.6877944351, 5.36035668519, 5.1404467393, 6.04544568093, 6.83392094019, 3.62076946254, 3.9894305834, 5.3118244995, 4.60821348028, 6.64058471615, 3.05518885448, 7.49256416375, 5.48507817779, 3.89779499662, 5.97624511403, 5.44706156091, 5.37703411681, 4.69080578773, 4.71164049118, 3.62991932939, 5.95766807637, 5.35712128439, 3.84923528282, 6.25050713632, 7.12224335715, 3.39940423384, 3.51055667227, 4.10099760366, 4.0963821002, 6.23358307481, 3.93948852677, 3.9254450774, 6.11813250146, 3.94045034629, 7.58301557326, 3.51320214534],
t: [-30.3529443619, -25.6114598545, -12.4252274527, 13.9613805187, -4.95093284067, -25.6922741909, 12.4687641616, -4.91376410703, -10.9673802876, 30.8141940549, 2.47495943114, 17.9755437524, 0.771130593362, 6.13748848563, -14.451963574, 28.1845341129, 12.538680066, -8.98323033713, 5.23128516476, -64.4890025358, 11.3574866818, 3.45407479151, 13.9243466131, -25.3640020468, -16.818006386, -10.2600510306, -13.2121341256, 2.5793388653, 8.71757496585, -10.6754987192, -2.92636601252, 25.1958807548, 40.5903293216, -9.12143363019, -24.2973623813, -3.17694450569, 10.8504984192, -31.3320597474, 4.84956746221, 15.0482769541, 3.29510469926, -6.19709187313, -8.77857413578, 29.5491741194, -5.13744879288, 23.0268604879, -6.63481657837, 2.75501499186, 21.7332501137, -24.8169949601, -7.83054706253, 28.3257962102, 12.3009774678, -21.56315724, -19.3355162838, 26.1464431708, -1.70607120268, 16.071723695, 2.05326630285, -5.09791161233],
mode: 'markers',
name: 'Trial 1',
marker: {
color: 'rgb(27,158,119)',
size: 110,
line: {color: 'white'},
opacity: 0.7
},
type: 'scatter'
};

//<NOTE: I deleted the other "trace 2-6" variables from the code example, it is too verbose and is not the problem>

var layout = {
title: 'Hobbs-Pearson Trials',
font: {size: 15},
plot_bgcolor: 'rgb(223, 223, 223)',
angularaxis: {tickcolor: 'rgb(253,253,253)'}
};

var data2 = [trace1, trace2, trace3, trace4, trace5, trace6];
var data3 = [trace1];

var App = React.createClass ({
  getInitialState: function () {
    return {
      name : MyStore.getName (),
      data2: data2
    };
  },

  componentDidMount: function () {
    MyStore.addChangeListener (this._onChange);
  },
  componentWillUnmount: function () {
    MyStore.removeChangeListener (this._onChange);
  },
  _onChange: function () {
    this.setState ({
      name: MyStore.getName (),
      data2: data3,
      layout: layout
    },
    function()
    {
      this.forceUpdate(function()
        {console.log("force update called")}
      )

    });
  },
  render: function () {
    return (
      <div>
        <h2> Hello, {this.state.name}! </h2>
        <MyForm />
        <Plotly id="polarScatterPlot" data={this.state.data2} layout={layout}/>
      </div>
    );
  }
});

/*
 *  Render your React UI on the page.
 */
React.render (
  <App />,
  document.body
);

Answer 1

确保您引用的是 react-plotly.js 而不是 react-plotly (依赖项也需要包含 .js)