时间戳

首页 > 解决方案 > 在 React 中访问 c​​hart.js 组件实例

javascript - 在 React 中访问 c​​hart.js 组件实例

问题描述

我<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/>
  }
}

标签： javascriptreactjstypescriptchart.js

解决方案

根据包装器中的这个问题，您可以在 bar 组件上放置一个 ref，即图表实例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();
  };

推荐阅读