2

我正在尝试将使用 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>
);

...

谢谢大家的帮助！:)

4

0 回答 0