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

feat: X轴名右侧不再截字+轴名位置可选(右侧/下方居中)+刻度方向下拉10°档+自定义手动输入 v1.17.1

Browse Source
This commit is contained in:
hz4th_coder
2026-08-23 10:09:14 +08:00
parent 59788639cb
commit 0e15d43ed4
3 changed files with 176 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+31 -7
View File
@@ -81,14 +81,38 @@ C, 20, 30, 40</pre>
</div>
<div class="config-group">
<label>X轴设置（轴名 · 刻度倾斜角度）</label>
<div class="res-input-row">
<input type="text" id="xAxisName" placeholder="横坐标轴名，如：月份" oninput="updateChart()">
<span class="res-times">·</span>
<input type="number" id="xLabelRotate" min="0" max="90" step="5" value="0" style="width:70px" title="刻度文字倾斜角度(0-90°)" oninput="updateChart()">
<span class="res-times">°</span>
<label>X轴设置</label>
<div class="config-group">
<label>横坐标轴名（可留空）</label>
<input type="text" id="xAxisName" placeholder="如：月份 / 年份" oninput="updateChart()">
</div>
<div class="config-group">
<label>轴名位置</label>
<select id="xAxisNameLoc" onchange="updateChart()">
<option value="end">横坐标右侧末端</option>
<option value="middle">横坐标轴下方居中</option>
</select>
</div>
<div class="config-group">
<label>刻度文字方向（0°=水平 · 倾斜可防长名重叠）</label>
<div class="res-input-row">
<select id="xLabelRotate" onchange="onXLabelRotateChange()" style="flex:1">
<option value="0">0° 水平</option>
<option value="10">10°</option>
<option value="20">20°</option>
<option value="30">30°</option>
<option value="40">40°</option>
<option value="50">50°</option>
<option value="60">60°</option>
<option value="70">70°</option>
<option value="80">80°</option>
<option value="90">90° 竖直</option>
<option value="custom">自定义…</option>
</select>
<input type="number" id="xLabelRotateCustom" min="0" max="90" value="0" style="width:70px;display:none" title="手动输入0-90°" oninput="onXLabelRotateCustomInput()">
<span class="res-times">°</span>
</div>
</div>
<p class="hint-text">轴名可留空不显示；刻度方向：0°=水平（默认），45°=右上倾斜，90°=竖直，实时生效</p>
</div>
<div class="config-group">