React Chart.jsカスタム凡例のonClick

Question

私はreact-chartjs-2を使用してアプリケーション用の折れ線グラフを作成しています。このアプリのために

は、私は伝説のカスタマイズを行なったし、私はこれを使用してそれらを生成することができます：

// Chart component 
<Line ref={ (chart) => chart ? this.insertLegends(chart) : null } 
     data={this.state.chart} 
     options={this.state.options} 
/> 

// Method which insert the html content 
insertLegends(chart) { 
    this.refs.chartLegendContainerGlobal.innerHTML = chart.chart_instance.generateLegend(); 
} 

まず、これは正しいアプローチですか？ グラフがnullにならないように、コンポーネント内にインライン条件を作成する必要がありました。

次に、凡例ごとにどのようにonClickイベントを挿入できますか？

私はこのことに非常に迷っています。この凡例をカスタマイズするには、より良い方法がありますか？

Answer 1

refをコールバックに渡すと、nullの値は取得されません。このようにインラインrefを実行すると、最初のレンダリングがnullになり、2番目のレンダーに要素が含まれます。

だから、あなたはあなたの引用文献を変更する必要があります。

：あなたには、いくつかの理由で onClickます。attribを追加することができない場合、あなたはあなたの insertLegends方法でそれを設定することができ、クリックイベントハンドラを追加するための

applyRef(ref) { 
    this.legend = ref; 
} 

render() { 
    return (
     // Chart component 
     <Line ref={this.applyRef} 
       data={this.state.chart} 
       options={this.state.options} 
     /> 
    ) 
} 

handleClick(e) { 
    // Do something here... 
} 

insertLegends(chart) { 
    this.refs.chartLegendContainerGlobal.innerHTML = chart.chart_instance.generateLegend(); 
    this.refs.chartLegendContainerGlobal.addEventListener('click', this.handleClick); 
} 

Answer 2

いくつかのトラブルや調査の後、私は凡例を追加し、その内部のクリックを制御する方法を見つけ出します。 @Chase DeAndaのcommect後

を更新し

// Inside my render method I added a simple ref to my component 
<Line ref='chart' data={this.convertData(this.props.data)} options={this.state.options} /> 

// Inside this method I'm able to get all the references that 
// I need to inject the html inside a container for the legends and 
// also to assign a click for each legend label 
componentDidMount() { 
    let legends = this.refs.chart.chart_instance.generateLegend(); 
    this.refs.chartLegendContainer.innerHTML = legends; 

    $(this.refs.chartLegendContainer).find('.legend-item').on('click', (e) => { 
     let index = $(e.currentTarget).index(); 
     this.refs.chart.chart_instance.data.datasets[index].hidden = !this.refs.chart.chart_instance.data.datasets[index].hidden; 
     $(e.currentTarget).toggleClass('disable-legend'); 
     this.refs.chart.chart_instance.update(); 
    }); 
} 

、私は彼の検討に基づいて少し変更：

// Applying the callback function to the ref 
<Line ref={this.applyRef} data={this.convertData(this.props.data)} options={this.state.options} /> 

// Inside the method I call the method to insert the legends 
applyRef(ref) { 
    this.legend = ref; 
    this.insertLegends(); 
} 

// Generates the legend and added them to my container element 
// Also give them the onClick event 
insertLegends() { 
    let legends = this.legend.chart_instance.generateLegend(); 
    this.refs.chartLegendContainer.innerHTML = legends; 
    $(this.refs.chartLegendContainer).find('.legend-item').on('click', (e) => this.onClickLegend(e)); 
} 

// During onClick I update the chart 
onClickLegend(e) { 
    let index = $(e.currentTarget).index(); 
    this.legend.chart_instance.data.datasets[index].hidden = !this.legend.chart_instance.data.datasets[index].hidden; 
    $(e.currentTarget).toggleClass('disable-legend'); 
    this.legend.chart_instance.update(); 
}