JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<header>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.5/g2/3.0.0/g2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.1/jspdf.debug.js"></script>

    <script>
        $(document).ready(function () {
            const data = [
                { genre: 'Sports', sold: 275 },
                { genre: 'Strategy', sold: 115 },
                { genre: 'Action', sold: 120 },
                { genre: 'Shooter', sold: 350 },
                { genre: 'Other', sold: 150 }
            ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
            // Step 1: 创建 Chart 对象
            const chart = new G2.Chart({
                container: 'c1', // 指定图表容器 ID
                width: 600, // 指定图表宽度
                height: 300 // 指定图表高度
            });
            // Step 2: 载入数据源
            chart.source(data);
            // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
            chart.interval().position('genre*sold').color('genre')
            // Step 4: 渲染图表
            chart.render();

            $("#exportButton").click(function () {
                var canvas = $("#c1 canvas").get(0);
                var dataURL = canvas.toDataURL();
                var pdf = new jsPDF();
                pdf.addImage(dataURL, 'JPEG', 0, 0);
                pdf.save("download.pdf");
            });
        });
    </script>
</header>

<body>
    <div id="c1"></div>
    <button id="exportButton">export</button>
</body>

</html>