React-chart не отображает легенду для круговой диаграммы

Question

React-chart не отображает легенду для круговой диаграммы

0

Я использую " react-chart для создания круговой диаграммы в нашем приложении. Мы хотим показать легенду для круговой диаграммы, но не можем найти какой-либо вариант о том, как это сделать, а также помочь в github.

Пожалуйста помоги.

Kunal Shewale 19 янв. 2016, в 21:16

Источник

Теги:

javascript

reactjs

chart.js

pie-chart

1 ответ

Ещё вопросы

Kunal Shewale · Answer 1 · 2016-01-22T14-05-00.000Z

Нашел вопрос и разместил решение для него.

Проблема. Проблема находится в пределах версии реактивной диаграммы, доступной на npm. Самая последняя версия доступна 0.6.0 тогда как github repo - 0.7.3. Проблема здесь в реакции-диаграмме. Фрагмент в 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>
    )
}