Question

正在处理使用create-react-app引导的应用程序。我需要将amChart导出为jpg / png / pdf格式。我正在尝试像发现的该Codepen一样进行导出：codepen export amchart example

            var chart = AmCharts.makeChart("chart-header", {
                "type": "pie",
                "theme": "light",
                "dataProvider": [ {
                    "country": "Czech Republic",
                    "litres": 301.9
                }, {
                    "country": "Austria",
                    "litres": 128.3
                }, {
                    "country": "UK",
                    "litres": 99
                }, {
                    "country": "The Netherlands",
                    "litres": 50
                }],
                "valueField": "litres",
                "titleField": "country",
                "export": {
                    "enabled": true,
                    "menu": []
                }
            })

            chart["export"].capture({}, function() {
                this.toPNG({}, function(base64) {
                    console.log(base64)                   
                })
            })

但是对于我而言，它不起作用。它总是给我：Uncaught TypeError: chart.export.capture is not a function。

Answer 1

所以..对或错，以下是我找到的简化解决方案。在单击“导出”按钮时，我制作了this.setState({ shouldExportChart: true })。 在“渲染”事件监听器中，我检查它是否为true，如果是，请执行导出并将其设置为false。同样，调用this.toJPG()，我们可以导出为JPG格式。对于PDF生成，我使用jspdf进行归档-jszip。

package.json中的依赖项：

"@amcharts/amcharts3-react": "^3.0.3",
"amcharts3": "^3.21.13",
"amcharts3-export": "github:amcharts/export"
"file-saver": "^1.3.3",
"fabric-webpack": "^1.6.0-rc.1"

Component.jsx：

import 'amcharts3'
import AmCharts from '@amcharts/amcharts3-react'
import 'amcharts3-export'
import 'fabric-webpack'
import  FileSaver from 'file-saver'

const chartConfig = {
            options: {
                ...,
                "export": {
                    "enabled": true,
                    "menu": []
                },
                "listeners": [
                    {
                        event: 'rendered',
                        method: (e) => {
                            if (window.fabric) {
                                e.chart.export.capture({}, function () {
                                    this.toPNG({}, function (base64) {
                                        this.toBlob({
                                            data: base64,
                                            type: 'image/png'
                                         }, (blob) => {
                                             FileSaver.saveAs(blob, 'chart.png')
                                         })
                                     })                               
                                })
                            }
                        }   
                    }
                ]
            }
        }

        <AmCharts.React {...chartConfig} />

在React应用程序中将AmCharts导出为image / pdf

1 个答案: