Mehrere Plot Graphen nicht auf der Webseite

Question

Ich versuche, das Tutorial hier zu folgen, Grafiken zu Webseiten hinzufügen: http://academy.plot.ly/react/3-with-plotly/. Ich stoße jedoch auf mehrere Probleme. Es sieht nicht so aus, als würden die Datenpunkte auf dem Plotgraph gerendert werden, und der zweite und der dritte Graph, die ich anzeigen möchte, werden nicht angezeigt. Ich kann nicht herausfinden, woher die Probleme kommen. Meine Plot-Klasse ist hier:

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> 
    ); 
    } 

} 

Mein Äquivalent der App.js Datei ist hier:

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> 
    ); 
    } 

} 

Der Ausgang jetzt wie folgt aussieht:

Answer 1

Da Sie Übergeben Sie die plot_id als props, versuchen Sie, die folgenden Zeilen in Ihrer Plot-Klasse zu this.props.plot_id stattzu ändern:

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