我如何将getSVG()与react高级图表结合使用？

Question

在开始构建我的函数之前，我正在尝试获取每个高图表的SVG字符串，并将其记录到控制台。

我认为我遇到的问题是调用getSVG()的方式，但我不确定。

我尝试过许多事情，但似乎无法使它发挥作用。

文档对此并不十分清楚：https://github.com/kirjs/react-highcharts

编辑:我在这里发现了一个类似的问题，但仍然无法让它发挥作用：https://github.com/kirjs/react-highcharts/issues/186

import React, { Component } from 'react';
import RHC from 'react-highcharts';
import Highcharts from 'highcharts';
import HighchartsExporting from 'highcharts/modules/exporting';

HighchartsExporting(Highcharts);
const ReactHighcharts = RHC.withHighcharts(Highcharts);


class Chart extends Component {

  componentDidMount() {
    console.log(this.refs[this.props.name].getSVG());
  }

  render() {

    return (
        <ReactHighcharts config={this.props.config} ref={this.props.name}/>  
    );
  }
}

export default Chart;

我得到了一个错误：

TypeError: this.refsthis.props.name.getSVG不是一个函数。(在“this.refsthis.props.name.getSVG()”中，“this.refsthis.props.name.getSVG”未定义)

Answer 1

请遵循以下代码在您的系统中实现：

const ReactHighcharts = require('react-highcharts');

class MyComponent extends React.Component {
  componentDidMount() {
    let chart = this.refs.chart.getChart();
    let svg = chart.getSVG(); // This is your SVG
  }

  render() {
    return <ReactHighcharts config={config} ref="chart"/>;
  }
}

如果componentDidMount()下的上述代码无法工作，请尝试以下代码：

componentDidUpdate() {
    if (this.refs.chart) {
        let chart = this.refs.chart.refs.chart;
        let html = document.createElement('html');
        html.innerHTML = chart.innerHTML;
        let svg = html.getElementsByTagName('svg')[0].outerHTML; // This is your SVG
    }
}

Answer 2

import React from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highcharts';
import exporting from 'highcharts/modules/exporting';
exporting(Highcharts)

class Chart extends Component {

  componentDidMount() {
    console.log(this.refs[chartRef].getSVG());
  }

  render() {
    return (
      <HighchartsReact
         highcharts={Highcharts}
         options={...yourOptions}
         ref="chartRef"
      />);
   }
}

export default Chart;

在这里您可以访问getSVG。只需包括exporting(Highcharts)