求js.amcharts在Python中的可用示例及PDF嵌入3D图表方案

核心思路 #

由于js.amcharts缺乏可用示例，换个落地性更强的思路：先通过AmCharts官方JS生成3D图表的HTML页面，再将HTML渲染为PDF（或先转图片再嵌入PDF）。

步骤1：生成含3D图表的HTML代码 #

直接用Python拼接HTML字符串（或用Jinja2模板），引入AmCharts的CDN资源并编写3D图表的JS配置：

html_content = """
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <style>
        #chartdiv { width: 100%; height: 500px; }
    </style>
</head>
<body>
    <div id="chartdiv"></div>
    <script>
        am5.ready(function() {
            // 创建3D柱状图实例
            var root = am5.Root.new("chartdiv");
            root.setThemes([am5themes_Animated.new(root)]);
            
            var chart = root.container.children.push(
                am5xy.XYChart.new(root, {
                    depth: 20, // 开启3D深度效果
                    panX: true,
                    panY: true,
                    wheelX: "panX",
                    wheelY: "zoomX"
                })
            );

            // 模拟数据源
            var data = [{
                category: "产品A",
                value: 45
            }, {
                category: "产品B",
                value: 62
            }, {
                category: "产品C",
                value: 38
            }, {
                category: "产品D",
                value: 75
            }];

            // X轴配置
            var xAxis = chart.xAxes.push(
                am5xy.CategoryAxis.new(root, {
                    categoryField: "category",
                    renderer: am5xy.AxisRendererX.new(root, {
                        minGridDistance: 30,
                        depth: 10
                    })
                })
            );
            xAxis.data.setAll(data);

            // Y轴配置
            var yAxis = chart.yAxes.push(
                am5xy.ValueAxis.new(root, {
                    renderer: am5xy.AxisRendererY.new(root, {
                        depth: 10
                    })
                })
            );

            // 3D柱状系列配置
            var series = chart.series.push(
                am5xy.ColumnSeries3D.new(root, {
                    name: "销量",
                    xAxis: xAxis,
                    yAxis: yAxis,
                    valueYField: "value",
                    categoryXField: "category"
                })
            );
            series.data.setAll(data);
            series.columns.template.setAll({
                tooltipText: "{categoryX}: {valueY} 件",
                width: am5.percent(80)
            });
            series.appear(1000);
            chart.appear(1000, 100);
        });
    </script>
</body>
</html>
"""

# 保存HTML到本地文件
with open("amcharts_3d_chart.html", "w", encoding="utf-8") as f:
    f.write(html_content)

步骤2：将HTML转成PDF（直接嵌入图表） #

推荐两种成熟工具，均支持渲染JS生成的图表：

方法一：使用WeasyPrint

1. 安装依赖：

pip install weasyprint

注：WeasyPrint需要系统依赖（如GTK+），Windows/macOS用户可参考官方文档补全依赖，或用Docker容器运行

2. 生成PDF代码：

from weasyprint import HTML

# 直接从HTML字符串生成PDF
HTML(string=html_content).write_pdf("3d_chart.pdf")

方法二：使用PDFKit（依赖wkhtmltopdf）

1. 安装依赖：

pip install pdfkit

同时需安装wkhtmltopdf：Windows/macOS从官网下载安装包，Linux用包管理器（如apt install wkhtmltopdf）

2. 生成PDF代码：

import pdfkit

# 从本地HTML文件生成PDF，设置JS延迟确保图表渲染完成
pdfkit.from_file(
    "amcharts_3d_chart.html", 
    "3d_chart.pdf", 
    options={"enable-javascript": "", "javascript-delay": 2000}
)

替代方案：生成图片再嵌入PDF #

若直接渲染HTML到PDF遇到兼容性问题，可先把图表转成图片，再用PDF库嵌入：

1. 用Playwright截图图表：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.set_content(html_content)
    page.wait_for_timeout(2000)  # 等待图表渲染
    page.locator("#chartdiv").screenshot(path="3d_chart.png")
    browser.close()

2. 用fpdf2嵌入图片到PDF：

from fpdf import FPDF

pdf = FPDF()
pdf.add_page()
pdf.image("3d_chart.png", x=10, y=10, w=180)  # 设置图片位置和宽度
pdf.output("chart_in_pdf.pdf")

内容的提问来源于stack exchange，提问作者Iowa