Question

我正在尝试按照此处的教程向网页添加图表：http://academy.plot.ly/react/3-with-plotly/。但是，我遇到了多个问题。它看起来不像在绘图图上呈现数据点，并且我希望显示的第二和第三图不显示。我无法弄清楚问题的来源。我的Plot课程在这里：

import React from 'react';

export default class Plot extends React.Component {
  constructor(props){
      super(props);
      this.state = {
        dates: [1, 2, 3],
        temps: [1, 2, 3],
        type: "scatter",
        plot_id: "plot"
      };
  }

  drawPlot() {
    Plotly.newPlot(this.state.plot_id, [{
      x: this.props.xData,
      y: this.props.yData,
      type: this.props.type
    }], {
      margin: {
        t: 0, r: 0, l: 30
      },
      xaxis: {
        gridcolor: 'transparent'
      }
    }, {
      displayModeBar: false
    });
  }

  componentDidMount() {
    this.drawPlot();
  }

  componentDidUpdate() {
    this.drawPlot();
  }

  render() {
    return (
      <div id={this.state.plot_id}></div>
    );
  }

}

我的App.js文件等效于：

import React from 'react';
import Plot from './Plot';

export default class Analytics extends React.Component {
  constructor(props){
      super(props);
      this.state = {
      };
  }

  render() {
    return (
      <div>
        <div>
          <h2>Graph 1</h2>
          <Plot
            x = {[1,2,4]}
            plot_id={"Plot1"}
          />
        </div>
        <div>
          <h2>Graph 2</h2>
          <Plot
            x={[0,1,2]}
            y={[2,3,6]}
            type={"bar"}
            plot_id={"Plot2"}
          />
        </div>
          <div>
            <h2>Graph 3</h2>
            <Plot
              x={[0,1,2,3,4]}
              y={[2,3,6,6,7]}
              type={"bar"}
              plot_id={"Plot3"}
            />
          </div>
      </div>
    );
  }

}

现在输出如下：

Answer 1

由于您将plot_id作为props传递，请尝试将Plot类中的以下行更改为this.props.plot_id而不是this.state.plot_id：

Plotly.newPlot(this.state.plot_id, [{
...
<div id={this.state.plot_id}></div>

多个阴谋图表未显示在网页上

1 个答案: