javascript - 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();
}

首先，这是正确的方法吗？我必须在组件内创建一个内联条件以防止图表为空。

第二，如何以及在哪里为每个图例放置 onClick 事件？

我对此非常迷失，有没有更好的方法来进行图例定制？

Answer 1

如果你给 ref 一个回调，那么你不会得到 null 值。像这样执行内联引用会导致第一个渲染为空，然后第二个渲染将具有该元素。

所以你应该将引用更改为:

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

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

要添加点击事件处理程序，如果由于某种原因无法添加 onClick 属性，则可以在 insertLegends 方法中设置它:

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

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