将react-native-chart-kit图表导出为PDF

问题描述

我正在尝试将使用react-native-chart-kit创建的图表导出到具有expo-print的PDF文档中。我很难这么做。我找不到在PDF内呈现图表的方法，它只会在图表说明中放置文本。

这是我正在使用的代码：

...
const createPDF = async() => {
    const html = `<View style={styles.formContainer}>
                    <LineChart
                        style={styles.graphStyle}
                        data={{
                            labels: reportData.sale,datasets: [
                                {
                                data: reportData.sale.map(i => reportData.saleById[i]['total'])
                                }
                            ]
                        }}
                        width={Dimensions.get("window").width}
                        height={Dimensions.get("window").height * 0.55}
                        yAxisLabel="Q."
                        chartConfig={chartConfig}
                        verticalLabelRotation={45}
                    />
                </View>`;
    const { uri } = await Print.printToFileAsync({html});
    Sharing.shareAsync(uri);
};

return (
    <View style={styles.formContainer}>
        <LineChart
            style={styles.graphStyle}
            data={{
                labels: reportData.sale,datasets: [
                    {
                        data: reportData.sale.map(i => reportData.saleById[i]['total'])
                    }
                ]
            }}
            width={Dimensions.get("window").width}
            height={Dimensions.get("window").height * 0.55}
            yAxisLabel="Q."
            chartConfig={chartConfig}
            verticalLabelRotation={45}
        />
    </View>

    <View>
        <Button
            theme={roundness}
            color={'#000000'}
            icon={"chart-bar"}
            height={50}
            mode="contained"
            labelStyle={{
                fontFamily: "dosis-bold",fontSize: 15,}}
            style={{
                fontFamily: 'dosis',marginLeft: '5%',marginRight: '5%',justifyContent: 'center',}}
            onPress={ createPDF }
        >
            {'CREAR PDF'}
        </Button>
    </View>
);

...

谢谢大家的帮助！ ：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）