Drawing App Builder 是一款功能强大的在线…

# HTML5 财务图表工具方案

一、功能设计

• 图表类型：折线图（月度收支趋势）、饼图（收支结构占比）
• 数据导入：支持上传 Excel（.xlsx）文件，解析 2024 年 1-6 月数据
• 导出：一键导出 PNG 图片

二、技术选型

| 模块 | 方案 |

|---|---|

| Excel 解析 | SheetJS（xlsx.js，CDN 引入） |

| 绘图 | 原生 Canvas API 或 Chart.js（推荐 Chart.js，自带 PNG 导出能力） |

| 导出 | canvas.toDataURL('image/png') + a 标签下载 |

三、Excel 数据格式约定

要求 Excel 表头如下（两列结构）：

```

月份 | 收入 | 支出 |（可选）支出分类

2024-01 | xxx | xxx | 餐饮/房租/交通...

...

2024-06

```

四、核心代码骨架

```html

<input type="file" id="file" accept=".xlsx,.xls">

<canvas id="lineChart"></canvas>

<canvas id="pieChart"></canvas>

<button onclick="exportPNG()">导出PNG</button>

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

document.getElementById('file').onchange = e => {

const reader = new FileReader();

reader.onload = ev => {

const wb = XLSX.read(new Uint8Array(ev.target.result), {type:'array'});

const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);

// rows 即 [{月份:'2024-01', 收入:..., 支出:...}, ...]

renderCharts(rows);

};

reader.readAsArrayBuffer(e.target.files[0]);

};

function renderCharts(rows){

const labels = rows.map(r => r['月份']);

new Chart(lineChart, { type:'line',

data:{ labels, datasets:[

{label:'收入', data:rows.map(r=>r['收入']), borderColor:'#4CAF50', tension:.3},

{label:'支出', data:rows.map(r=>r['支出']), borderColor:'#F44336', tension:.3}

]}});

new Chart(pieChart, { type:'pie',

data:{ labels: rows.map(r=>r['支出分类']),

datasets:[{ data: rows.map(r=>r['支出'])