javascript - 访问React中的chart.js组件实例

Question

我使用<Bar data={data} options={options}><Bar/>用于渲染。在选项对象中，我设置了图例 onClick 函数，但无法访问图表实例。我应该访问实例，因为应该访问图表 getDatasetMeta() 方法。遵循文档中的说明: https://www.chartjs.org/docs/2.9.3/configuration/legend.html

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

    // We hid a dataset ... rerender the chart
    ci.update();
}

请告知是否有一种方法可以访问 Bar 的实例，而不是像这个 new Bar () 那样手动创建它。

示例:

function options() => ({
 legend: {
  onClick: function (e, legendItem){
   //Here I would like to set legend hidden  and some other things
  }
 }
});

class Component extends React.Component {
  render() {
    return <Bar data={data()} options={options()}><Bar/>
  }
}

Answer 1

根据包装器中的此问题，您可以在栏组件上放置一个引用，这就是图表实例 https://github.com/reactchartjs/react-chartjs-2/issues/3

<div className={classes.chartContainer}>
          <Line
            ref={myChartRef}
            data={chartData}
            options={options}
          />
        </div>

 const myChartRef = React.createRef();
  const handleResetZoom = () => {
    let chart = myChartRef.current.chartInstance;
    chart.resetZoom();
  };