如何使用 React Js 从 ApexCharts 获取 URI

Question

我正在尝试使用数据 URI 方法获取图表 URI。我看过很多使用 Apexchart Js 获取 pdf 的例子，比如 this CodePen from ApexChart，当我试图在 React 上重现它时，我得到了 TypeError: Cannot read 属性 'type' of未定义

这是我的组件，挂载后看起来像这样：

componentDidMount() {

console.log(this.state.loading);
if (this.state.loading === false) {
  const {options} = this.state;
  const node = ReactDOM.findDOMNode(this);
  if (node instanceof HTMLElement) {
    var chart = new ApexCharts(node.querySelector('.charty'), options);
    chart.render().then(() => {
      setTimeout(function() {
        chart.dataURI().then(uri => {
          console.log(uri);
        });
      }, 4000);
    });
  }
} else {
  return;
}
}

在我的状态和渲染中也定义了类型，如下所示：

    <div className='rfe'>
      <div className='rfea'>
        From {this.state.AxisMonth[0]} to{' '}
        {this.state.AxisMonth[this.state.AxisMonth.length - 1]}
      </div>
      <Chart
        className='charty'
        type='area'
        options={this.state.options}
        series={this.state.series}
        width='1000'
        height='380'
      />
    </div>
  </div>

这是我得到的错误

真的需要帮助。

Answer 1

您可以使用 exec 函数从 React 组件调用 ApexCharts 的任何方法。

 getDataUri() {
    ApexCharts.exec("basic-bar", "dataURI").then(({ imgURI, blob }) => {
      console.log(imgURI);
    });
  }

这是一个完整的 codesandbox 示例

如何使用 React Js 从 ApexCharts 获取 URI

How can I get URI from ApexCharts with React Js

javascript

charts

reactjs

react-router

apexcharts