import { Graph, IPoint, FontOptions } from "./core"; /** * 雷达图数据项 */ export interface RadarDataItem { /** * 维度名称(标签) */ label: string; /** * 该维度的值(0-1之间,或实际数值) */ value: number; } /** * 雷达图数据集 */ export interface RadarDataSet { /** * 数据项列表 */ data: RadarDataItem[]; /** * 填充色 */ fillColor?: string; /** * 填充透明度 */ fillOpacity?: number; /** * 描边颜色 */ strokeColor?: string; /** * 描边宽度 */ strokeWidth?: number; /** * 数据点样式 */ pointStyle?: { r?: number; fill?: string; stroke?: string; strokeWidth?: number; }; } /** * 雷达图样式配置 */ export interface RadarStyle { /** * 网格线颜色 */ gridColor?: string; /** * 网格线宽度 */ gridWidth?: number; /** * 网格透明度 */ gridOpacity?: number; /** * 轴线颜色 */ axisColor?: string; /** * 轴线宽度 */ axisWidth?: number; /** * 轴线透明度 */ axisOpacity?: number; /** * 标签字体配置 */ labelFont?: FontOptions; /** * 标签偏移量(距离顶点的距离) */ labelOffset?: number; } /** * 雷达图配置选项 */ export interface RadarOptions { /** * 雷达图中心坐标 */ center: IPoint; /** * 雷达图半径 */ radius: number; /** * 维度数量(可选,如果不提供则从数据集中推导) * @deprecated 将从数据集中自动推导 */ dimensions?: number; /** * 最大值(用于数据归一化,可选,默认从数据中计算最大值) */ maxValue?: number; /** * 网格层数 */ gridLevels?: number; /** * 数据集列表 */ datasets?: RadarDataSet[]; /** * 样式配置 */ style?: RadarStyle; } /** * 雷达图组件 * * @example * ```typescript * const radar = new Radar({ * center: { x: 300, y: 300 }, * radius: 150, * gridLevels: 5, * datasets: [ * { * data: [ * { label: '攻击力', value: 80 }, * { label: '防御力', value: 60 }, * { label: '速度', value: 90 }, * { label: '力量', value: 70 }, * { label: '技巧', value: 85 }, * { label: '耐力', value: 75 } * ], * fillColor: '#446688', * fillOpacity: 0.3, * strokeColor: '#446688', * strokeWidth: 2, * pointStyle: { * r: 4, * fill: '#446688', * stroke: '#FFF', * strokeWidth: 1 * } * } * ] * }); * svg.append(radar); * ``` */ export default class Radar extends Graph { private readonly radarOptions; private readonly angles; private readonly vertices; private dimensions; private maxValue; constructor(options: RadarOptions); /** * 从数据集中计算最大值 */ private calculateMaxValue; /** * 获取指定比例半径下的顶点坐标 * @param ratio 半径比例 (0-1) * @returns 顶点坐标数组 */ private getVerticesAtRatio; /** * 绘制网格线 */ private drawGrid; /** * 绘制轴线 */ private drawAxis; /** * 绘制标签 */ private drawLabels; /** * 绘制数据集 */ private drawDatasets; /** * 添加数据集 * @param dataset 数据集 */ addDataset(dataset: RadarDataSet): this; /** * 清空数据集 */ clearDatasets(): this; /** * 更新数据集 * @param index 数据集索引 * @param dataset 新数据集 */ updateDataset(index: number, dataset: RadarDataSet): this; protected attrs(): any; }