One Chart

图表

OneBarChart

基础用法

传入分类与系列数据即可渲染分组柱状图，支持多系列并排对比；下方 demo 可切换分组、堆叠与横向三种模式。

数据支持负数：数值域自动扩展到整齐边界并覆盖最小/最大值（0 为基线），负值柱在基线另一侧渲染且不会超出绘图区。

Tooltip

鼠标悬停到柱子上显示该柱的系列名与数值（分组、堆叠、横向模式均支持），tooltip 默认开启，可传 tooltip: false 关闭或传入 { formatter } 自定义内容。

季度销量050100150200250300Q1Q2Q3Q4
查看代码
import { OneBarChart } from '@geektech/one-chart';

// 分组柱状图
const chart = new OneBarChart({
  title: '季度销量',
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [
    { name: '华东', data: [120, 200, 150, 280] },
    { name: '华南', data: [80, 110, 130, 160] },
  ],
  showValues: true,
});
chart.mount(document.querySelector('#app')!);

// 横向模式：分类放到 Y 轴，适合分类名较长的场景
const horizontal = new OneBarChart({
  title: '季度销量（横向）',
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [
    { name: '华东', data: [120, 200, 150, 280] },
    { name: '华南', data: [80, 110, 130, 160] },
  ],
  horizontal: true,
});
horizontal.mount(document.querySelector('#app2')!);

属性

OneBarChart 属性
名称签名说明
categoriesstring[]分类名，决定 X 轴刻度数量
series{ name: string; data: number[] }[]系列数据，每个系列长度须与分类一致
horizontalboolean横向布局，默认 false
stackedboolean堆叠模式，默认 false；不支持负值
showValuesboolean在柱顶显示数值标签，默认 false
gridboolean是否显示网格线，默认 true
valueFormat(value: number) => string数值刻度与标签格式化

堆叠与横向

  • 堆叠模式下数值域自动覆盖各分类的累计总和，避免柱子溢出绘图区。
  • 横向模式将分类放到 Y 轴，适合分类名较长的场景。