反応ハイチャートでgetSVG（）を使用するにはどうすればよいですか？

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.refs[this.props.name].getSVG is not a function. (In 'this.refs[this.props.name].getSVG()', 'this.refs[this.props.name].getSVG' is undefined)

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

を