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

feat: 多图合并支持多行多列网格排布 + 统一'多图合并'文案

Browse Source 
- 合并模式新增'多行多列'排布（radio），可选每行列数（gridCols），
  子图按最大单元格 contain 居中排列，列数变化实时重排
- 后端 /api/combine 支持 direction=grid + cols 参数
- 页面所有'双图合并'文案统一改为'多图合并'
This commit is contained in:
hz4th_coder
2026-08-19 13:39:14 +08:00
parent e56c6cb79f
commit 6b5223daec
5 changed files with 130 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11 -5
View File
@@ -23,7 +23,7 @@
<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>
<button class="mode-btn" id="btnCombineMode" onclick="switchMode('combine')">🖼️ 双图合并</button>
<button class="mode-btn" id="btnCombineMode" onclick="switchMode('combine')">🖼️ 多图合并</button>
</div>
</div>
@@ -272,18 +272,24 @@ C, 20, 30, 40</pre>
</div>
</div>
<!-- 双图合并配置区 -->
<!-- 多图合并配置区 -->
<div class="panel-section" id="combineConfigSection" style="display:none;">
<h2>🖼️ 多图合并配置</h2>
<div class="config-group">
<label>排列方向</label>
<label>排列方式</label>
<div class="combine-direction">
<label class="dir-option"><input type="radio" name="combineDirection" value="horizontal" checked onchange="generateCombine()"> ⇄ 横排（左右）</label>
<label class="dir-option"><input type="radio" name="combineDirection" value="vertical" onchange="generateCombine()"> ⇅ 竖排（上下）</label>
<label class="dir-option"><input type="radio" name="combineDirection" value="horizontal" checked onchange="generateCombine()"> ⇄ 横排（单行）</label>
<label class="dir-option"><input type="radio" name="combineDirection" value="vertical" onchange="generateCombine()"> ⇅ 竖排（单列）</label>
<label class="dir-option"><input type="radio" name="combineDirection" value="grid" onchange="onCombineGridToggle()"> ▦ 多行多列</label>
</div>
</div>
<div class="config-group" id="gridColsGroup" style="display:none;">
<label>每行列数</label>
<input type="number" id="gridCols" value="2" min="1" max="6" oninput="generateCombine()">
</div>
<div id="combineChartsContainer">
<!-- 图表卡片由 JS 动态渲染 -->
</div>