多圖示不顯示在網頁上

我想要按照教程在這裏添加圖表到網頁：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

多圖示不顯示在網頁上

回答

相關問題