修复响应为 0 时的图形问题

Question

我正在将数据从 API 传递到我的图形组件。

 <div className="col-lg-sm-md-xs-9" style={styles.graphs}>
                        {this.renderGraphComponent(this.state.graphType, { graphData: n.question_options, responseData: n.total_no_of_question_response})}
                    </div>

我正在我的图形组件中映射响应并显示数据。

const data=props.graphData.map((data)=>{
  return {name:data.label,uv:((data.no_of_response)/(props.responseData)*100),response:data.no_of_response}
});
  
const CustomizedAxisTick =(props)=>{
  const {x, y, payload} = props;
   return (
    <Text x={x} y={y} width={75} fontSize={12} textAnchor="middle" verticalAnchor="start">{ ((payload.value).length > 30) ? (((payload.value).substring(0,30-3)) + '...') : 
      payload.value }  
    </Text>
      )
};

如果所有响应均为 0，应用程序将崩溃。如何解决此问题。

Answer 1

const data=props.graphData.map((data)=>{
  let graphkey=((data.no_of_response)/(props.responseData)*100)
  **return {name:data.label,**uv:+graphkey** || 0,response:data.no_of_response}**
});

检查 NAN 条件解决了问题。

修复响应为 0 时的图形问题

Fixing the issue with graphs when response is 0

database

zero

reactjs

redux

recharts