开发预览更新于 2026-05-10

Histogram 直方图

分箱直方图，每个 bin 一个柱。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

<script setup lang="ts">
import { CfHistogram } from '@chufix-design/vue';
const bins = [
  { label: '0-50', count: 4 },
  { label: '50-100', count: 8 },
  { label: '100-200', count: 16 },
  { label: '200-500', count: 28 },
  { label: '500-1k', count: 22 },
  { label: '1k-2k', count: 12 },
  { label: '2k-5k', count: 5 },
  { label: '5k+', count: 1 },
];
</script>

<template>
  <CfHistogram :bins="bins" />
</template>

<CfHistogram ... />

两种典型分布

正态分布 / 长尾分布对比 — 长尾时建议用对数刻度的 bin label。

背景

正态分布

长尾分布

<script setup lang="ts">
import { CfHistogram } from '@chufix-design/vue';
const normal = [
  { label: '40-60', count: 2 },
  { label: '60-80', count: 8 },
  { label: '80-100', count: 18 },
  { label: '100-120', count: 32 },
  { label: '120-140', count: 24 },
  { label: '140-160', count: 12 },
  { label: '160-180', count: 4 },
];
const skewed = [
  { label: '0-100', count: 38 },
  { label: '100-200', count: 22 },
  { label: '200-400', count: 14 },
  { label: '400-800', count: 8 },
  { label: '800-1.6k', count: 4 },
  { label: '1.6k+', count: 2 },
];
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">正态分布</div>
      <CfHistogram :bins="normal" :height="160" :color-index="0" />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">长尾分布</div>
      <CfHistogram :bins="skewed" :height="160" :color-index="3" />
    </div>
  </div>
</template>

<CfHistogram bins={bins} />

API

属性	类型	默认值	说明
`bins`	`HistogramBin[]`	`—`	{ label, count }[]
`colorIndex`	`0..7`	`0`
`showLabels`	`boolean`	`true`	bin label 显示开关