我正在使用 react-chart
在我们的应用程序中渲染饼图。我们想要显示饼图的图例,但找不到任何有关如何执行此操作的选项,并且 github
存储库上也没有任何帮助。
请帮忙。
最佳答案
找到问题并发布解决方案。
问题 - 该问题存在于 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);
};
请参阅我在获取最新版本后用于显示图例的代码。
组件文件
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>
)
}
关于javascript - React-chart 不渲染 PIE 图表的图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34885389/