RechartsコンポーネントをPNGに

Question

現在、私はPNGファイルとしてエクスポートしたいRechartsコンポーネントを持っています。

    <LineChart 
         id="currentChart" 
         ref={(chart) => this.currentChart = chart} 
         width={this.state.width} 
         height={this.state.height} 
         data={this.testData} 
         margin={{top: 5, right: 30, left: 20, bottom: 5}} 
        > 
         <XAxis dataKey="name"/> 
         <YAxis/> 
         <CartesianGrid strokeDasharray="3 3"/> 
         <Tooltip/> 
         <Legend /> 
         <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/> 
         <Line type="monotone" dataKey="uv" stroke="#82ca9d"/> 
        </LineChart> 

これがライブラリによって直接サポートされているかどうかはわかりません。

MDN

に概説されているよう私はしかし、私はHTML要素をレンダリングする一般的な方法のわからないんだけど、解決策に私が近づくためにキャンバスと2Dレンダリングコンテキストを使用することを含むアイデアを持っています（またはReact Component）をキャンバスとして使用してこのソリューションを実装します。

私はこれについて間違っていると思いますが、私は訂正を感謝します！

Answer 1

Rechartsコンポーネントを掘り下げて私の問題を解決することができました。 Rechartsは私がしなければならなかったすべては、私がプロンプト保存のためFileSaver.jsを使用していますHTMLやSVG

// Exports the graph as embedded JS or PNG 
exportChart(asSVG) { 

    // A Recharts component is rendered as a div that contains namely an SVG 
    // which holds the chart. We can access this SVG by calling upon the first child/ 
    let chartSVG = ReactDOM.findDOMNode(this.currentChart).children[0]; 

    if (asSVG) { 
     let svgURL = new XMLSerializer().serializeToString(chartSVG); 
     let svgBlob = new Blob([svgURL], {type: "image/svg+xml;charset=utf-8"}); 
     FileSaver.saveAs(svgBlob, this.state.uuid + ".svg"); 
    } else { 
     let svgBlob = new Blob([chartSVG.outerHTML], {type: "text/html;charset=utf-8"}); 
     FileSaver.saveAs(svgBlob, this.state.uuid + ".html"); 
    } 
} 

両方として保存するために適切に変換したラッパーの下でSVGとしてレンダリングされます。