多图示不显示在网页上

我想要按照教程在这里添加图表到网页：http://academy.plot.ly/react/3-with-plotly/。但是，我遇到了很多问题。它看起来不像是在绘制图表上呈现的数据点，并且我希望显示的第二个和第三个图表未显示。我无法弄清楚问题来自哪里。我的剧情类是在这里：多图示不显示在网页上

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

}

输出现在看起来是这样的：

来源

2016-12-19 Alex

我不是reactJS的专家，但是您的第一张图中没有任何y值。 –

我不是，但JS不会自动将缺失值设置为构造函数中的默认值？ – Alex

既然你通过plot_id作为props，请尝试更改您的绘图类中的以下行到this.props.plot_id而不是this.state.plot_id：

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

来源

2017-04-27 18:49:32

多图示不显示在网页上

回答

相关问题