hz4th_coder/data-chart-tool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增表格图片生成功能

Browse Source 
- 新增 POST/GET /api/table 接口
- 支持5种主题风格、自定义字体大小、斑马纹等
- 前端新增图表/表格模式切换
- 完美支持中文内容显示（Noto Sans CJK SC）
- 更新 API 文档和 README
This commit is contained in:
hz4th_coder
2026-07-17 12:40:47 +08:00
parent 02212e9ef7
commit e2f9892a2a
5 changed files with 657 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+49 -8
View File
@@ -12,18 +12,26 @@
<!-- 顶部标题 -->
<header class="app-header">
<h1>📊 数据可视化图表生成器</h1>
<p class="subtitle">粘贴数据，生成精美图表</p>
<p class="subtitle">粘贴数据，生成精美图表或表格</p>
</header>
<div class="main-content">
<!-- 左侧面板：数据输入和配置 -->
<div class="left-panel">
<!-- 模式切换 -->
<div class="panel-section">
<div class="mode-switch">
<button class="mode-btn active" id="btnChartMode" onclick="switchMode('chart')">📈 图表模式</button>
<button class="mode-btn" id="btnTableMode" onclick="switchMode('table')">📋 表格模式</button>
</div>
</div>
<!-- 数据输入区 -->
<div class="panel-section">
<h2>📝 数据输入</h2>
<div class="input-format-hint">
<p><strong>格式说明：</strong></p>
<p>第一行为表头（系列名称），第一列为横坐标值</p>
<p>第一行为表头，后续行为数据</p>
<pre>类别, 系列1, 系列2, 系列3
A, 10, 20, 30
B, 15, 25, 35
@@ -31,14 +39,14 @@ C, 20, 30, 40</pre>
</div>
<textarea id="dataInput" placeholder="在此粘贴数据...&#10;支持逗号、制表符分隔&#10;&#10;示例：&#10;产品, 2023年, 2024年, 2025年&#10;Q1, 120, 150, 180&#10;Q2, 200, 220, 260&#10;Q3, 180, 210, 240&#10;Q4, 250, 280, 320"></textarea>
<div class="btn-group">
<button class="btn btn-primary" onclick="generateChart()">🎨 生成图表</button>
<button class="btn btn-primary" id="btnGenerate" onclick="generate()">🎨 生成图表</button>
<button class="btn btn-secondary" onclick="loadSampleData()">📋 加载示例</button>
<button class="btn btn-secondary" onclick="clearData()">🗑️ 清空</button>
</div>
</div>
<!-- 图表配置区 -->
<div class="panel-section">
<div class="panel-section" id="chartConfigSection">
<h2>⚙️ 图表配置</h2>
<div class="config-group">
@@ -78,8 +86,41 @@ C, 20, 30, 40</pre>
</div>
</div>
<!-- 表格配置区 -->
<div class="panel-section" id="tableConfigSection" style="display:none;">
<h2>⚙️ 表格配置</h2>
<div class="config-group">
<label>标题</label>
<input type="text" id="tableTitle" placeholder="表格标题" oninput="updateTable()">
</div>
<div class="config-group">
<label>主题风格</label>
<select id="tableTheme" onchange="updateTable()">
<option value="default">默认</option>
<option value="dark">深色</option>
<option value="macarons">马卡龙</option>
<option value="gradient">渐变</option>
<option value="retro">复古</option>
</select>
</div>
<div class="config-group">
<label>字体大小: <span id="fontSizeValue">14</span>px</label>
<input type="range" id="tableFontSize" min="10" max="24" value="14" oninput="updateFontSize(); updateTable()">
</div>
<div class="config-group">
<label>显示选项</label>
<div class="checkbox-group">
<label><input type="checkbox" id="stripeRows" checked onchange="updateTable()"> 斑马纹</label>
</div>
</div>
</div>
<!-- 系列配置区 -->
<div class="panel-section">
<div class="panel-section" id="seriesConfigSection">
<h2>🎨 系列配置</h2>
<div id="seriesConfig" class="series-config">
<p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>
@@ -87,7 +128,7 @@ C, 20, 30, 40</pre>
</div>
<!-- 区域分割配置 -->
<div class="panel-section">
<div class="panel-section" id="splitConfigSection">
<h2>📐 区域分割</h2>
<div class="config-group">
<label><input type="checkbox" id="enableSplit" onchange="updateChart()"> 启用区域分割</label>
@@ -119,8 +160,8 @@ C, 20, 30, 40</pre>
<!-- 导出按钮 -->
<div class="panel-section">
<div class="btn-group">
<button class="btn btn-success" onclick="exportChart('png')">📥 导出PNG</button>
<button class="btn btn-success" onclick="exportChart('svg')">📥 导出SVG</button>
<button class="btn btn-success" onclick="exportImage('png')">📥 导出PNG</button>
<button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
</div>
</div>
</div>