🔧

堆叠柱状图制作

📥 导出设置
×
px
💡 提示:所有图表均在浏览器本地生成,保护您的隐私安全。
👁️ 实时预览
🎨 图表样式配置
{{ chartConfig.chartWidth }}px
{{ chartConfig.chartHeight }}px
{{ chartConfig.chartHAlign }}%
{{ chartConfig.chartVAlign }}%
{{ chartConfig.barWidthRatio }}%
{{ chartConfig.cornerRadius }}px
{{ chartConfig.borderWidth }}px
{{ chartConfig.opacity }}%
{{ chartConfig.titleAlign }}%
{{ chartConfig.titleVertical }}%
{{ chartConfig.titleFontSize }}px
{{ chartConfig.subtitleFontSize }}px
{{ chartConfig.xAxisFontSize }}px
{{ chartConfig.yAxisFontSize }}px
{{ chartConfig.xAxisRotate }}°
{{ chartConfig.yAxisTicks }}
{{ chartConfig.gridOpacity }}%
{{ chartConfig.labelFontSize }}px
{{ chartConfig.labelDecimals }}
{{ chartConfig.legendFontSize }}px
{{ chartConfig.watermarkFontSize }}px
{{ chartConfig.watermarkOpacity }}%
{{ chartConfig.watermarkDensity }}
{{ chartConfig.watermarkAngle }}°
{{ chartConfig.sourceFontSize }}px
{{ chartConfig.sourceX }}%
{{ chartConfig.sourceY }}%
{{ chartConfig.authorFontSize }}px
{{ chartConfig.authorX }}%
{{ chartConfig.authorY }}%
📝 数据编辑
系列(堆叠分段)
# 类目 {{ s.name }} 合计 操作
{{ index + 1 }} {{ rowTotal(row) }}

💡 功能说明

堆叠柱状图制作是一款在浏览器本地运行的图表生成工具。它以"类目"为横轴、"系列"为堆叠分段,把同一类目下的多个系列数值累加成一根完整的柱子,既能看出每个类目的总量高低,又能看清内部各系列的构成比例,全程在本地完成、无需上传服务器,既高效又保护数据隐私。堆叠柱状图特别适合展示总量与结构并存的数据,例如各月总销量中各渠道的构成、各项预算中各科目的占比、各部门人数中各职级的分布等。无论是经营分析汇报、预算结构拆解还是调查数据整理,都能一键生成并导出精美图表。

  • 实时预览:数据、系列、颜色、标题、坐标轴、图例等所有改动即时反映在预览区,所见即所得。
  • 两种堆叠模式:数值堆叠按实际数值累加,适合看总量;百分比堆叠将每根柱子统一为 100%,适合看结构占比。
  • 灵活的系列管理:最多支持 8 个系列,可随时增删系列、修改系列名称与颜色,新增系列会自动为已有类目补齐数值列。
  • 样式丰富:支持图表尺寸、柱子宽度、顶部圆角、柱子边框、整体透明度等多种样式自定义,圆角只作用于每根柱子的最顶部分段。
  • 坐标轴与网格:可分别控制 X 轴与 Y 轴的显示、颜色、字号,支持标签旋转、自定义 Y 轴最大值与刻度数量,网格支持实线、虚线、点线三种样式。
  • 数值标注:可在每个分段内居中或顶部标注该段数值,并可在柱顶显示该柱合计;分段过矮时会自动省略文字,避免溢出。
  • 自定义配色:内置多套配色主题按系列一键套用,也支持为单个系列设置颜色,或基于某色一键生成渐变配色。
  • 水印与导出:支持添加水印保护图表;可复制图片到剪贴板,或导出为 PNG、JPG、SVG 格式。

⚠️ 注意事项

  • 类目建议不超过 12 项、系列不超过 8 个,过多会导致柱子过窄、文字拥挤,影响可读性。
  • 数值为 0 或空的分段不会绘制,也不会计入该柱合计。
  • 不支持负数:若填入负值,会自动归零并给出提示。堆叠柱状图无法正确表达正负混合的堆叠关系。
  • 百分比堆叠模式下,Y 轴固定为 0%–100%,此时"Y 轴最大值"设置不再生效。
  • 百分比堆叠时若某个类目合计为 0,该柱将不会显示,也不会参与占比换算。
  • Y 轴最大值留空或设为 0 时会自动根据数据取一个合适的刻度上限;如需固定刻度可手动填写。
  • X 轴标签文字较长时,可适当调整"X 轴标签旋转"角度,避免文字相互重叠。
  • 页面数据会自动保存在本地浏览器,下次打开可继续编辑;点击"清空"将同时清除本地存储。
  • 导出 PNG / JPG 为位图,放大后可能模糊;如需无损缩放请选择 SVG 格式。