feat: 双图合并升级为多图合并 + 数据输入框加宽
- 合并模式默认2张图，新增'＋添加图表'按钮可不断添加，每张图可独立删除 - 每张图卡片：标题/类型/主题/显示选项/数据，动态渲染（combineCharts 数组驱动） - 合并逻辑支持 N 张图：横排等高依次排列、竖排等宽依次堆叠 - 后端 /api/combine 支持 charts 数组（N 张），兼容 chart1+chart2 - 修复合并图数据输入框过窄：.config-group textarea 统一 width:100%（与设置区一致）
This commit is contained in:
+4
-111
@@ -274,7 +274,7 @@ C, 20, 30, 40</pre>
|
||||
|
||||
<!-- 双图合并配置区 -->
|
||||
<div class="panel-section" id="combineConfigSection" style="display:none;">
|
||||
<h2>🖼️ 双图合并配置</h2>
|
||||
<h2>🖼️ 多图合并配置</h2>
|
||||
|
||||
<div class="config-group">
|
||||
<label>排列方向</label>
|
||||
@@ -284,119 +284,12 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="combine-chart-card">
|
||||
<h3>📈 图1</h3>
|
||||
<div class="config-group">
|
||||
<label>标题</label>
|
||||
<input type="text" id="combineTitle1" placeholder="图1标题" oninput="generateCombine()">
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>图表类型</label>
|
||||
<select id="combineType1" onchange="generateCombine()">
|
||||
<option value="bar">柱状图</option>
|
||||
<option value="line">折线图</option>
|
||||
<option value="bar-line">柱状图+折线图混合</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>主题风格</label>
|
||||
<select id="combineTheme1" onchange="generateCombine()">
|
||||
<option value="default">默认</option>
|
||||
<option value="dark">深色</option>
|
||||
<option value="macarons">马卡龙</option>
|
||||
<option value="gradient">渐变</option>
|
||||
<option value="retro">复古</option>
|
||||
<option value="ocean">海洋</option>
|
||||
<option value="forest">森林</option>
|
||||
<option value="sunset">日落</option>
|
||||
<option value="lavender">薰衣草</option>
|
||||
<option value="minimal">极简</option>
|
||||
<option value="cherry">樱花</option>
|
||||
<option value="midnight">午夜</option>
|
||||
<option value="gold">金色</option>
|
||||
<option value="coral">珊瑚</option>
|
||||
<option value="mint">薄荷</option>
|
||||
<option value="slate">石板灰</option>
|
||||
<option value="sky">天空蓝</option>
|
||||
<option value="rose">玫瑰红</option>
|
||||
<option value="amber">琥珀黄</option>
|
||||
<option value="emerald">翡翠绿</option>
|
||||
<option value="indigo">靛蓝色</option>
|
||||
<option value="stone">石灰白</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>显示选项</label>
|
||||
<div class="checkbox-group">
|
||||
<label><input type="checkbox" id="combineLegend1" checked onchange="generateCombine()"> 图例</label>
|
||||
<label><input type="checkbox" id="combineGrid1" checked onchange="generateCombine()"> 网格线</label>
|
||||
<label><input type="checkbox" id="combineLabel1" onchange="generateCombine()"> 数据标签</label>
|
||||
<label><input type="checkbox" id="combineStack1" onchange="generateCombine()"> 堆叠</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>数据</label>
|
||||
<textarea id="combineData1" rows="5" placeholder="图1的CSV数据..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="combine-chart-card">
|
||||
<h3>📈 图2</h3>
|
||||
<div class="config-group">
|
||||
<label>标题</label>
|
||||
<input type="text" id="combineTitle2" placeholder="图2标题" oninput="generateCombine()">
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>图表类型</label>
|
||||
<select id="combineType2" onchange="generateCombine()">
|
||||
<option value="bar">柱状图</option>
|
||||
<option value="line">折线图</option>
|
||||
<option value="bar-line">柱状图+折线图混合</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>主题风格</label>
|
||||
<select id="combineTheme2" onchange="generateCombine()">
|
||||
<option value="default">默认</option>
|
||||
<option value="dark">深色</option>
|
||||
<option value="macarons">马卡龙</option>
|
||||
<option value="gradient">渐变</option>
|
||||
<option value="retro">复古</option>
|
||||
<option value="ocean">海洋</option>
|
||||
<option value="forest">森林</option>
|
||||
<option value="sunset">日落</option>
|
||||
<option value="lavender">薰衣草</option>
|
||||
<option value="minimal">极简</option>
|
||||
<option value="cherry">樱花</option>
|
||||
<option value="midnight">午夜</option>
|
||||
<option value="gold">金色</option>
|
||||
<option value="coral">珊瑚</option>
|
||||
<option value="mint">薄荷</option>
|
||||
<option value="slate">石板灰</option>
|
||||
<option value="sky">天空蓝</option>
|
||||
<option value="rose">玫瑰红</option>
|
||||
<option value="amber">琥珀黄</option>
|
||||
<option value="emerald">翡翠绿</option>
|
||||
<option value="indigo">靛蓝色</option>
|
||||
<option value="stone">石灰白</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>显示选项</label>
|
||||
<div class="checkbox-group">
|
||||
<label><input type="checkbox" id="combineLegend2" checked onchange="generateCombine()"> 图例</label>
|
||||
<label><input type="checkbox" id="combineGrid2" checked onchange="generateCombine()"> 网格线</label>
|
||||
<label><input type="checkbox" id="combineLabel2" onchange="generateCombine()"> 数据标签</label>
|
||||
<label><input type="checkbox" id="combineStack2" onchange="generateCombine()"> 堆叠</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label>数据</label>
|
||||
<textarea id="combineData2" rows="5" placeholder="图2的CSV数据..."></textarea>
|
||||
</div>
|
||||
<div id="combineChartsContainer">
|
||||
<!-- 图表卡片由 JS 动态渲染 -->
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary" onclick="addCombineChart()">＋ 添加图表</button>
|
||||
<button class="btn btn-primary" onclick="generateCombine()">🖼️ 生成合并图</button>
|
||||
<button class="btn btn-success" onclick="exportImage('png')">📥 下载图片</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user