React-chart 不呈现饼图的图例答案

【问题标题】：React-chart does not render the legend for PIE chartReact-chart 不呈现饼图的图例
【发布时间】：2016-01-22 21:33:08
【问题描述】：

我正在使用react-chart 在我们的应用程序中渲染饼图。我们想显示饼图的图例，但找不到任何有关如何执行此操作的选项，并且在 github 存储库上也没有任何帮助。

请帮忙。

【问题讨论】：

标签： javascript reactjs pie-chart chart.js

【解决方案1】：

找到问题并发布解决方案。

问题 - 问题出现在 npm 上可用的 react-chart 版本中。可用的最新版本是0.6.0，而github repo 有0.7.3。问题在这里react-chart。 0.6.0中的sn-p如下

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

【讨论】：