解决响应为0时图表的问题

编程问答 2022-08-22

问题描述

我正在将数据从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，应用程序将崩溃。如何解决此问题。

解决方法

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是否解决了问题。

databasereactjsreactjsrechartsreduxreduxredux