饼图 / 层级
教室图
type: 'classroom'半圆形座位图——每个类别的数值对应若干圆形座位，按同心弧排列。悬停某个座位会高亮其类别并淡化其余；点击座位会触发数据点事件。使用 'item' 类型自定义角度，或用 'classroom' 获得底部对齐的半圆默认值。
编辑右侧的JSON并按Run（或⌘/Ctrl + Enter）——数据、标题、类别和颜色全部实时更新。
实时
教室图
编辑 · JSON
数据格式
[{ name, y, color? }] · keys: ['name','y','label']
数据结构
传入图表的 JSON——可直接放进你的 series。
data: [
{ name: '有风险', y: 3 },
{ name: '进步中', y: 7 },
{ name: '暂无数据', y: 6 }
]示例
import KatuCharts from 'katucharts.js';
KatuCharts.chart('container', {
chart: { type: 'classroom' },
series: [{
cursor: 'pointer',
point: { events: { click: function () { openDetails(this.name); } } },
data: [
{ name: '有风险', y: 3 },
{ name: '进步中', y: 7 },
{ name: '暂无数据', y: 6 }
]
}]
});类型特定选项
| 选项 | 描述 |
|---|---|
startAngle / endAngle | 弧线角度范围（教室图默认 -100 / 100）。 |
center / size / innerSize | 位置、整体大小与中空内圈（省略 size 时自动适配）。 |
rows / itemPadding | 固定行数与座位间距（省略时自动计算行数）。 |
marker.radius | 固定座位半径；省略则自动调整（座位越少越大）。 |
dataLabels | 按类别显示标签，例如 '{point.label} ({point.y})'。 |
point.events.click | 按座位点击——打开弹窗或详情页。 |
group | 将每条数据渲染为单独座位，按分组着色并归入图例。 |
变体
座位标签
在每个区块上显示简短标签和数量。
KatuCharts.chart('container', {
chart: { type: 'classroom' },
series: [{
keys: ['name', 'y', 'label'],
data: [['左翼', 39, 'LEFT'], ['绿党', 60, 'GRN'], ['极右翼', 50, 'AFR']],
dataLabels: { enabled: true, format: '{point.label} ({point.y})' }
}]
});独立座位
每个学生一个座位，按状态分组着色；悬停查看姓名，点击打开。
KatuCharts.chart('container', {
chart: { type: 'classroom' },
series: [{
cursor: 'pointer',
tooltip: { pointFormat: '{point.name}' },
point: { events: { click: function () { openStudent(this.name); } } },
data: [
{ name: 'Student 1', y: 1, group: '进步中' },
{ name: 'Student 2', y: 1, group: '暂无数据' }
]
}]
});矩形网格
去掉角度即可得到行/列网格排列。
KatuCharts.chart('container', {
chart: { type: 'item' },
series: [{
layout: 'horizontal', rows: 5,
data: [
{ name: '满意', y: 34 },
{ name: '中立', y: 18 },
{ name: '不满意', y: 10 }
]
}]
});Common errors
- Why does my 教室图 chart render as a line chart?
- The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
- Why do I get "Cannot read properties of null (reading 'appendChild')"?
- The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
- Why is the chart rendering with zero height?
- The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.
FAQ
- How do I create a 教室图 chart in JavaScript?
- Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'classroom' }, series: [...] }).
- Why does my 教室图 chart render as a line chart?
- The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
- Why do I get "Cannot read properties of null (reading 'appendChild')"?
- The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
- Why is the chart rendering with zero height?
- The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.