One Chart

图表

OneScatterChart

基础用法

传入系列数据（每个点为 [x, y] 数值对）即可渲染散点图，x/y 轴均为线性比例尺。

身高与体重23456711.522.533.54
查看代码
import { OneScatterChart } from '@geektech/one-chart';

const chart = new OneScatterChart({
  title: '身高与体重',
  series: [
    { name: 'A 组', data: [[1, 2], [2, 4], [3, 6]] },
    { name: 'B 组', data: [[1, 5], [2, 3], [3, 4]] },
  ],
});
chart.mount(document.querySelector('#app')!);

属性

OneScatterChart 属性
名称签名说明
series{ name: string; data: [number, number][] }[]系列数据，每个点为 x/y 数值对
gridboolean是否显示网格线，默认 true
valueFormat(value: number) => string数值刻度与 tooltip 的格式化
pointRadiusnumber数据点半径（px），默认 4

坐标与数值域

x/y 数值域按数据范围取整齐边界，不强制包含 0；网格线沿两侧刻度生成，与柱状图/折线图共用配色常量。

Tooltip

悬停数据点显示系列名与坐标（x/y 数值），tooltip 默认开启，可传 tooltip: false 关闭或传入 { formatter } 自定义内容。

身高与体重23456711.522.533.54
查看代码
import { OneScatterChart } from '@geektech/one-chart';

const chart = new OneScatterChart({
  title: '身高与体重',
  series: [
    { name: 'A 组', data: [[1, 2], [2, 4], [3, 6]] },
    { name: 'B 组', data: [[1, 5], [2, 3], [3, 4]] },
  ],
});
chart.mount(document.querySelector('#app')!);