反應圖不會渲染PIE圖表的圖例

Question

我正在使用react-chart在我們的應用程序中呈現餅圖。我們想顯示餅圖的圖例，但找不到有關如何做到這一點的任何選項，也無法找到有關github回購的任何幫助。

請幫忙。

Answer 1

發現問題併發布相同的解決方案。

問題 - 問題位於npm上的react-chart版本中。那裏有最新版本0.6.0，而github回購有0.7.3。問題在這裏react-chart。在0.6.0的片段是如下

classData[name] = function() { 
    return this.state.chart[type].apply(this.state.chart, arguments); 
}; 

請參閱我用它獲得最新版本後顯示傳說中的代碼。

Component File

componentDidUpdate(){ 
    var pieChartLegend = this.refs.pieChart && this.refs.pieChart.generateLegend(); 
    if(this.state.chartLegend !== pieChartLegend){this.setState({chartLegend:pieChartLegend});} 
} 

render(){ 
    return(
    <div> 
    <PieChart ref="pieChart" data={data} style={{height:'60%',width:'100%'}} 
    options={ 
     { 
      tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value + ' %' %>", 
      legendTemplate:"<ul class=\"<%=name.toLowerCase()%>-legend\" style=\"list-style-type: none\"><% for (var i=0; i<segments.length; i++){%><li style=\"text-align: left;\"><span style=\"color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>" 
     } 
    } /> 
    <div style={{position:'absolute',top:'100px',left:'370px'}} dangerouslySetInnerHTML={{__html: this.state.chartLegend}} /> 
    </div> 
    ) 
}