如何使用从PPTX中提取的XML图表数据在HTML中绘制可视化图表

1 修正后端XML解析代码 #

你当前的代码缺少XML加载、节点遍历的逻辑，且未初始化root对象就直接调用，首先按Office Open XML的图表结构调整解析逻辑：

import xml.etree.ElementTree as ET
import json

def parse_pptx_chart_xml(xmlfile):
    # 注册Office XML的命名空间，否则无法匹配节点
    ns = {
        'c': 'http://schemas.openxmlformats.org/drawingml/2006/chart',
        'a': 'http://schemas.openxmlformats.org/drawingml/2006/main'
    }
    tree = ET.parse(xmlfile)
    root = tree.getroot()
    
    chart_data = {
        "chart_type": "",
        "categories": [],
        "series": []
    }
    
    # 识别图表类型
    if root.find(".//c:barChart", ns) is not None:
        chart_data["chart_type"] = "bar"
    elif root.find(".//c:lineChart", ns) is not None:
        chart_data["chart_type"] = "line"
    elif root.find(".//c:pieChart", ns) is not None:
        chart_data["chart_type"] = "pie"
    
    # 提取横轴分类数据
    cat_nodes = root.findall(".//c:cat//c:pt//c:v", ns)
    chart_data["categories"] = [node.text for node in cat_nodes]
    
    # 提取各系列数值数据
    ser_nodes = root.findall(".//c:ser", ns)
    for ser in ser_nodes:
        ser_name = ser.find(".//c:tx//c:v", ns).text if ser.find(".//c:tx//c:v", ns) is not None else "未命名系列"
        val_nodes = ser.findall(".//c:val//c:pt//c:v", ns)
        ser_values = [float(node.text) for node in val_nodes]
        chart_data["series"].append({
            "name": ser_name,
            "data": ser_values
        })
    
    # 输出为JSON文件，方便前端直接调用
    with open("chart_data.json", "w", encoding="utf-8") as f:
        json.dump(chart_data, f, ensure_ascii=False, indent=2)
    return chart_data

items = parse_pptx_chart_xml('chart1.xml')

2 前端HTML绘制实现 #

你可以选择任意本地部署的开源前端图表库完成渲染，无需额外在线依赖：

1. 将你下载好的图表库文件放入项目目录，在HTML中引入本地文件即可
2. 加载刚才生成的chart_data.json数据，按对应图表库的参数要求传入即可生成图表

示例HTML结构参考：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PPTX图表渲染</title>
    <!-- 引入本地存储的图表库文件 -->
    <script src="./本地图表库文件路径"></script>
</head>
<body>
    <!-- 图表渲染容器 -->
    <div id="chart-container" style="width: 800px; height: 500px;"></div>
    <script>
        // 加载解析好的图表数据
        fetch('./chart_data.json')
            .then(res => res.json())
            .then(chartData => {
                // 初始化图表实例，按你使用的图表库语法调整参数即可
                const chartInstance = 图表库初始化方法(document.getElementById('chart-container'))
                // 传入图表类型、分类、系列数据完成渲染
                const option = {
                    xAxis: {
                        type: 'category',
                        data: chartData.categories
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: chartData.series.map(item => {
                        return {
                            name: item.name,
                            type: chartData.chart_type,
                            data: item.data
                        }
                    })
                }
                chartInstance.setOption(option)
            })
    </script>
</body>
</html>

• 如果你需要还原PPT中的图表样式、坐标轴配置、数据标签等效果，可以扩展XML解析逻辑，这类配置都存储在<c:chart>节点的子节点中，提取后直接传入前端图表库的对应配置项即可。

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