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不是函数。（在＆＃39; this.refs [this.props.name] .getSVG（）＆＃39;，＆＃39; this.refs [this.props.name] .getSVG＆＃39;未定义）

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)

如何在反应高图中使用getSVG（）？

2 个答案: