Preview Updated 2026-05-10

ViolinPlot 小提琴图

显示每个分组的分布形状（KDE 近似），中央叠加箱线图的 Q1/中位/Q3。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

每个分组传入原始 values: number[]，组件内部做分箱 + 高斯平滑，形成左右对称的密度形状。中央的细矩形是 Q1–Q3 四分位区间，横线是中位数。

背景视口

src/App.vue

<script setup lang="ts">
import { CfViolinPlot } from '@chufix-design/vue';

function gauss(n: number, mean: number, sd: number) {
  const out: number[] = [];
  for (let i = 0; i < n; i++) {
    let u = 0;
    let v = 0;
    while (u === 0) u = Math.random();
    while (v === 0) v = Math.random();
    out.push(mean + sd * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v));
  }
  return out;
}

const data = [
  { label: '对照组', values: gauss(220, 60, 14) },
  { label: '实验 A', values: [...gauss(180, 72, 10), ...gauss(60, 90, 6)] },
  { label: '实验 B', values: gauss(240, 78, 22) },
  { label: '实验 C', values: gauss(200, 82, 9) },
];
</script>
<template>
  <CfViolinPlot :data="data" :width="540" :height="300" />
</template>

<script setup>
import { CfViolinPlot } from '@chufix-design/vue';

function gauss(n, mean, sd) {
  const out= [];
  for (let i = 0; i < n; i++) {
    let u = 0;
    let v = 0;
    while (u === 0) u = Math.random();
    while (v === 0) v = Math.random();
    out.push(mean + sd * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v));
  }
  return out;
}

const data = [
  { label: '对照组', values: gauss(220, 60, 14) },
  { label: '实验 A', values: [...gauss(180, 72, 10), ...gauss(60, 90, 6)] },
  { label: '实验 B', values: gauss(240, 78, 22) },
  { label: '实验 C', values: gauss(200, 82, 9) },
];
</script>
<template>
  <CfViolinPlot :data="data" :width="540" :height="300" />
</template>

import { CfViolinPlot } from '@chufix-design/react';

export default function Demo() {
  const data = [
    { label: '对照组', values: gauss(220, 60, 14) },
    { label: '实验 A', values: [...gauss(180, 72, 10), ...gauss(60, 90, 6)] },
    { label: '实验 B', values: gauss(240, 78, 22) },
    { label: '实验 C', values: gauss(200, 82, 9) },
  ];
  return (
    <>
      <CfViolinPlot data={data} width={540} height={300} />
    </>
  );
}

import { CfViolinPlot } from '@chufix-design/react';

export default function Demo() {
  const data = [
    { label: '对照组', values: gauss(220, 60, 14) },
    { label: '实验 A', values: [...gauss(180, 72, 10), ...gauss(60, 90, 6)] },
    { label: '实验 B', values: gauss(240, 78, 22) },
    { label: '实验 C', values: gauss(200, 82, 9) },
  ];
  return (
    <>
      <CfViolinPlot data={data} width={540} height={300} />
    </>
  );
}

API

属性	类型	默认值	说明
`data`	`ViolinSeries[]`	`—`	`{ label, values }[]`
`width`	`number`	`520`	SVG 宽度
`height`	`number`	`280`	SVG 高度
`bins`	`number`	`24`	直方图分箱数
`bandwidth`	`number`	`2`	高斯平滑半径
`ariaLabel`	`string`	`小提琴图`	—

Events

Vue 事件	React 回调	载荷
`item-enter` / `item-leave`	`onItemEnter` / `onItemLeave`	`ViolinPlotInteractionPayload`