transone-chart 0.1.2

package/lib/charts/bar.ts

@@ -0,0 +1,270 @@
+/**
+ * 柱状图：纵向 / 横向，支持多系列分组与 stack 堆叠。
+ *
+ * 几何规则：
+ * - 分组：同一类目内多个系列并排，子柱宽 = 类目带宽 × (1 - gap) / 系列数 × 0.8
+ * - 堆叠：同名 stack 系列共用一根柱，后一个系列从前一个的顶端继续累加
+ * - 数值轴强制包含 0（柱形高度必须从零线起算才有意义）
+ */
+
+import type { ICanvas2D } from '../core/canvas';
+import { ChartBase } from '../core/chart';
+import type { LayoutResult } from '../core/layout';
+import type { LegendItem } from '../core/legend';
+import type { BarChartOption, BarSeries } from '../types';
+
+/** 柱体在类目带内的水平偏移与宽度（纵向）或垂直偏移与高度（横向）。 */
+interface Slot {
+  offset: number;
+  size: number;
+}
+
+export class BarChart extends ChartBase<BarChartOption> {
+  protected isHorizontal(): boolean {
+    return this.option.horizontal ?? false;
+  }
+
+  protected getValueDomain(): { min: number; max: number } {
+    const { series, yAxis } = this.option;
+    let max = 0;
+    let min = 0;
+
+    // 堆叠：按 stack 组在类目上累加正负
+    const stackGroups = groupStacks(series);
+    const categoryCount = Math.max(
+      0,
+      ...series.map((s) => s.data.length)
+    );
+
+    for (let i = 0; i < categoryCount; i += 1) {
+      for (const group of stackGroups) {
+        let positive = 0;
+        let negative = 0;
+        for (const s of group) {
+          const v = s.data[i] ?? 0;
+          if (v >= 0) {
+            positive += v;
+          } else {
+            negative += v;
+          }
+        }
+        if (positive > max) {
+          max = positive;
+        }
+        if (negative < min) {
+          min = negative;
+        }
+      }
+    }
+
+    if (yAxis?.min !== undefined) {
+      min = Math.min(min, yAxis.min);
+    }
+    if (yAxis?.max !== undefined) {
+      max = Math.max(max, yAxis.max);
+    }
+    return { min, max };
+  }
+
+  protected getCategoryLabels(): readonly string[] {
+    return this.option.xAxis.labels;
+  }
+
+  protected getLegendItems(): LegendItem[] {
+    return this.option.series
+      .filter((s) => s.name)
+      .map((s, i) => ({
+        name: s.name as string,
+        color: this.seriesColor(i, s.color),
+      }));
+  }
+
+  protected drawSeries(
+    ctx: ICanvas2D,
+    layout: LayoutResult,
+    option: BarChartOption
+  ): void {
+    const scales = this.cartesian;
+    if (!scales) {
+      return;
+    }
+    void layout; // 柱体几何全部由比例尺绝对坐标决定，无需 plot 引用
+    const { value, category } = scales;
+    const horizontal = option.horizontal ?? false;
+
+    const stackGroups = groupStacks(option.series);
+    const categoryCount = option.xAxis.labels.length;
+
+    for (let i = 0; i < categoryCount; i += 1) {
+      // 每个类目带内：无堆叠时按系列分组并排；有堆叠时按 stack 组并排
+      const groups = stackGroups;
+      const seriesCount = groups.length;
+      const explicitWidth = option.series
+        .map((s) => s.barWidth)
+        .find((w) => w !== undefined && w > 0);
+      const slot = this.computeSlot(category, seriesCount, explicitWidth);
+
+      groups.forEach((group, groupIndex) => {
+        const slotOffset = slot.offset + groupIndex * slot.size;
+        let cursor = 0; // 堆叠游标（绝对值累加）
+
+        group.forEach((series) => {
+          const raw = series.data[i] ?? 0;
+          const color = this.seriesColor(
+            option.series.indexOf(series),
+            series.color
+          );
+
+          if (horizontal) {
+            const x0 = value.scale(0);
+            const x1 = value.scale(cursor + raw);
+            const base = Math.min(x0, x1);
+            const width = Math.abs(x1 - x0);
+            const y = category.bandStart(i) + slotOffset;
+            this.drawBar(ctx, {
+              x: base,
+              y,
+              width,
+              height: slot.size,
+              radius: series.borderRadius ?? 0,
+              color,
+              roundSide: raw >= 0 ? 'right' : 'left',
+            });
+          } else {
+            const y0 = value.scale(cursor);
+            const y1 = value.scale(cursor + raw);
+            const top = Math.min(y0, y1);
+            const height = Math.abs(y1 - y0);
+            const x = category.bandStart(i) + slotOffset;
+            this.drawBar(ctx, {
+              x,
+              y: top,
+              width: slot.size,
+              height,
+              radius: series.borderRadius ?? 0,
+              color,
+              roundSide: raw >= 0 ? 'top' : 'bottom',
+            });
+          }
+
+          cursor += raw;
+        });
+      });
+    }
+  }
+
+  private computeSlot(
+    category: { bandStart(index: number): number; innerWidth(): number },
+    groupCount: number,
+    explicitWidth?: number
+  ): Slot {
+    if (explicitWidth !== undefined) {
+      // 显式柱宽：组内居中
+      return {
+        offset: (category.innerWidth() - explicitWidth) / 2,
+        size: explicitWidth,
+      };
+    }
+    const size = category.innerWidth() / Math.max(1, groupCount) * 0.8;
+    const gap = (category.innerWidth() - size * groupCount) / 2;
+    return { offset: gap, size };
+  }
+
+  private drawBar(
+    ctx: ICanvas2D,
+    bar: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      radius: number;
+      color: string;
+      roundSide: 'top' | 'bottom' | 'right' | 'left';
+    }
+  ): void {
+    if (bar.width <= 0 || bar.height <= 0) {
+      return;
+    }
+    ctx.save();
+    ctx.fillStyle = bar.color;
+    ctx.beginPath();
+    roundRectPath(ctx, bar, bar.radius, bar.roundSide);
+    ctx.fill();
+    ctx.restore();
+  }
+}
+
+/** 按 stack 分组：无 stack 的系列各自成组；同名 stack 合并为一组。 */
+function groupStacks(series: readonly BarSeries[]): BarSeries[][] {
+  const groups: BarSeries[][] = [];
+  const stackMap = new Map<string, BarSeries[]>();
+
+  for (const s of series) {
+    if (s.stack) {
+      let group = stackMap.get(s.stack);
+      if (!group) {
+        group = [];
+        stackMap.set(s.stack, group);
+        groups.push(group);
+      }
+      group.push(s);
+    } else {
+      groups.push([s]);
+    }
+  }
+  return groups;
+}
+
+/**
+ * 圆角柱体路径：仅 roundSide 指示的一侧（两个角）圆角。
+ * - 纵向柱：'top' 顶部两角 / 'bottom' 底部两角
+ * - 横向柱：'right' 右侧两角 / 'left' 左侧两角
+ */
+function roundRectPath(
+  ctx: ICanvas2D,
+  bar: { x: number; y: number; width: number; height: number },
+  radius: number,
+  roundSide: 'top' | 'bottom' | 'right' | 'left'
+): void {
+  const { x, y, width, height } = bar;
+  const r = Math.min(radius, width / 2, height / 2);
+  if (r <= 0) {
+    ctx.rect(x, y, width, height);
+    return;
+  }
+
+  const roundTopLeft = roundSide === 'top' || roundSide === 'left';
+  const roundTopRight = roundSide === 'top' || roundSide === 'right';
+  const roundBottomLeft = roundSide === 'bottom' || roundSide === 'left';
+  const roundBottomRight = roundSide === 'bottom' || roundSide === 'right';
+
+  ctx.moveTo(x + (roundTopLeft ? r : 0), y);
+  ctx.lineTo(x + width - (roundTopRight ? r : 0), y);
+  if (roundTopRight) {
+    ctx.arcTo(x + width, y, x + width, y + r, r);
+  } else {
+    ctx.lineTo(x + width, y);
+  }
+
+  ctx.lineTo(x + width, y + height - (roundBottomRight ? r : 0));
+  if (roundBottomRight) {
+    ctx.arcTo(x + width, y + height, x + width - r, y + height, r);
+  } else {
+    ctx.lineTo(x + width, y + height);
+  }
+
+  ctx.lineTo(x + (roundBottomLeft ? r : 0), y + height);
+  if (roundBottomLeft) {
+    ctx.arcTo(x, y + height, x, y + height - r, r);
+  } else {
+    ctx.lineTo(x, y + height);
+  }
+
+  ctx.lineTo(x, y + (roundTopLeft ? r : 0));
+  if (roundTopLeft) {
+    ctx.arcTo(x, y, x + r, y, r);
+  } else {
+    ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+}

package/lib/charts/index.ts

@@ -0,0 +1,4 @@
+export { LineChart } from './line';
+export { BarChart } from './bar';
+export { PieChart } from './pie';
+export { RadarChart } from './radar';

package/lib/charts/line.ts

@@ -0,0 +1,153 @@
+/**
+ * 折线图：多系列 / 平滑曲线 / 面积填充 / 数据点标记。
+ * 类目 x 轴 + 数值 y 轴，复用 ChartBase 的笛卡尔管线。
+ */
+
+import type { ICanvas2D } from '../core/canvas';
+import { ChartBase } from '../core/chart';
+import type { LayoutResult } from '../core/layout';
+import type { LegendItem } from '../core/legend';
+import type { LineChartOption } from '../types';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+export class LineChart extends ChartBase<LineChartOption> {
+  protected getValueDomain(): { min: number; max: number } {
+    const { series, yAxis, startFromZero = false } = this.option;
+    let min = Infinity;
+    let max = -Infinity;
+    for (const s of series) {
+      for (const value of s.data) {
+        if (value < min) {
+          min = value;
+        }
+        if (value > max) {
+          max = value;
+        }
+      }
+    }
+    if (!Number.isFinite(min) || !Number.isFinite(max)) {
+      return { min: 0, max: 1 };
+    }
+    if (startFromZero && min > 0) {
+      min = 0;
+    }
+    if (yAxis?.min !== undefined) {
+      min = Math.min(min, yAxis.min);
+    }
+    if (yAxis?.max !== undefined) {
+      max = Math.max(max, yAxis.max);
+    }
+    return { min, max };
+  }
+
+  protected getCategoryLabels(): readonly string[] {
+    return this.option.xAxis.labels;
+  }
+
+  protected getLegendItems(): LegendItem[] {
+    return this.option.series
+      .filter((s) => s.name)
+      .map((s, i) => ({
+        name: s.name as string,
+        color: this.seriesColor(i, s.color),
+      }));
+  }
+
+  protected drawSeries(
+    ctx: ICanvas2D,
+    layout: LayoutResult,
+    option: LineChartOption
+  ): void {
+    const scales = this.cartesian;
+    if (!scales) {
+      return;
+    }
+    const { plot } = layout;
+    const { value, category } = scales;
+
+    const pointsPerSeries: Point[][] = option.series.map((series) =>
+      series.data.map((d, i) => ({
+        x: category.center(i),
+        y: value.scale(d),
+      }))
+    );
+
+    option.series.forEach((series, index) => {
+      const points = pointsPerSeries[index];
+      if (points.length === 0) {
+        return;
+      }
+      const color = this.seriesColor(index, series.color);
+      const lineWidth = series.lineWidth ?? 2;
+
+      // 面积填充（先画，保证在折线之下）
+      if (series.area) {
+        ctx.save();
+        ctx.fillStyle = color;
+        ctx.globalAlpha = 0.15;
+        ctx.beginPath();
+        this.tracePath(ctx, points, series.smooth ?? false);
+        ctx.lineTo(points[points.length - 1].x, plot.y + plot.height);
+        ctx.lineTo(points[0].x, plot.y + plot.height);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+      }
+
+      // 折线
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.lineJoin = 'round';
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      this.tracePath(ctx, points, series.smooth ?? false);
+      ctx.stroke();
+      ctx.restore();
+
+      // 数据点标记
+      if (series.showSymbol !== false) {
+        ctx.save();
+        ctx.fillStyle = color;
+        for (const p of points) {
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, Math.max(2.5, lineWidth + 0.5), 0, Math.PI * 2);
+          ctx.fill();
+        }
+        ctx.restore();
+      }
+    });
+  }
+
+  /** 折线路径：直线或 Catmull-Rom 平滑插值（三次贝塞尔）。 */
+  private tracePath(ctx: ICanvas2D, points: readonly Point[], smooth: boolean): void {
+    if (points.length === 0) {
+      return;
+    }
+    ctx.moveTo(points[0].x, points[0].y);
+    if (!smooth || points.length < 3) {
+      for (let i = 1; i < points.length; i += 1) {
+        ctx.lineTo(points[i].x, points[i].y);
+      }
+      return;
+    }
+
+    for (let i = 0; i < points.length - 1; i += 1) {
+      const p0 = points[Math.max(0, i - 1)];
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const p3 = points[Math.min(points.length - 1, i + 2)];
+
+      const cp1x = p1.x + (p2.x - p0.x) / 6;
+      const cp1y = p1.y + (p2.y - p0.y) / 6;
+      const cp2x = p2.x - (p3.x - p1.x) / 6;
+      const cp2y = p2.y - (p3.y - p1.y) / 6;
+
+      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+    }
+  }
+}

package/lib/charts/pie.ts

@@ -0,0 +1,110 @@
+/**
+ * 饼图 / 环形图：扇区绘制、百分比标签、图例。
+ * 无笛卡尔坐标轴，全部几何在绘图区内按极坐标计算。
+ */
+
+import type { ICanvas2D } from '../core/canvas';
+import { ChartBase } from '../core/chart';
+import type { LayoutResult } from '../core/layout';
+import type { LegendItem } from '../core/legend';
+import { applyFont } from '../core/text';
+import type { PieChartOption } from '../types';
+
+const TWO_PI = Math.PI * 2;
+
+export class PieChart extends ChartBase<PieChartOption> {
+  protected hasCartesianAxis(): boolean {
+    return false;
+  }
+
+  protected getLegendItems(): LegendItem[] {
+    return this.option.data.map((d, i) => ({
+      name: d.name,
+      color: d.color ?? this.seriesColor(i),
+    }));
+  }
+
+  protected drawSeries(
+    ctx: ICanvas2D,
+    layout: LayoutResult,
+    option: PieChartOption
+  ): void {
+    const { plot } = layout;
+    const centerX = plot.x + plot.width / 2;
+    const centerY = plot.y + plot.height / 2;
+
+    const maxRadius =
+      Math.min(plot.width, plot.height) / 2;
+    const outerRadius = resolveRadius(option.radius ?? '60%', maxRadius);
+    const innerRadius = resolveRadius(option.innerRadius ?? 0, maxRadius);
+    const startAngle = option.startAngle ?? -Math.PI / 2;
+
+    const data = option.data.filter((d) => d.value > 0);
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    if (total <= 0 || outerRadius <= 0) {
+      return;
+    }
+
+    let angle = startAngle;
+
+    data.forEach((d, index) => {
+      const sweep = (d.value / total) * TWO_PI;
+      const color = d.color ?? this.seriesColor(index);
+
+      ctx.save();
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      if (innerRadius > 0) {
+        // 环形：外弧 → 内弧（反向）闭合
+        ctx.arc(centerX, centerY, outerRadius, angle, angle + sweep);
+        ctx.arc(
+          centerX,
+          centerY,
+          innerRadius,
+          angle + sweep,
+          angle,
+          true
+        );
+      } else {
+        ctx.arc(centerX, centerY, outerRadius, angle, angle + sweep);
+        ctx.lineTo(centerX, centerY);
+      }
+      ctx.closePath();
+      ctx.fill();
+      // 扇区间分隔线
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      ctx.restore();
+
+      // 扇区标签：名称 + 百分比，画在扇区角平分线上
+      if (option.showLabel !== false) {
+        const midAngle = angle + sweep / 2;
+        const labelRadius = (outerRadius + (innerRadius > 0 ? innerRadius : 0)) / 2 * 0.85;
+        const labelX = centerX + Math.cos(midAngle) * labelRadius;
+        const labelY = centerY + Math.sin(midAngle) * labelRadius;
+        const percent = total > 0 ? Math.round((d.value / total) * 100) : 0;
+
+        applyFont(ctx, option.labelFontSize ?? 10);
+        ctx.fillStyle = option.labelColor ?? '#ffffff';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`${d.name} ${percent}%`, labelX, labelY);
+      }
+
+      angle += sweep;
+    });
+  }
+}
+
+/** 解析半径：数字为像素；'60%' 形式按最大半径百分比。 */
+function resolveRadius(value: number | string, maxRadius: number): number {
+  if (typeof value === 'number') {
+    return Math.max(0, value);
+  }
+  const match = /^(\d+(?:\.\d+)?)%$/.exec(value);
+  if (!match) {
+    return maxRadius;
+  }
+  return (Number(match[1]) / 100) * maxRadius;
+}

package/lib/charts/radar.ts

@@ -0,0 +1,166 @@
+/**
+ * 雷达图：多边形网格 + 指标轴 + 多系列区域/折线。
+ * 指标刻度按各 indicator.max（缺省取所有系列该指标最大值）归一化。
+ */
+
+import type { ICanvas2D } from '../core/canvas';
+import { ChartBase } from '../core/chart';
+import type { LayoutResult } from '../core/layout';
+import type { LegendItem } from '../core/legend';
+import { applyFont } from '../core/text';
+import type { RadarChartOption } from '../types';
+
+interface PolarPoint {
+  x: number;
+  y: number;
+}
+
+export class RadarChart extends ChartBase<RadarChartOption> {
+  protected hasCartesianAxis(): boolean {
+    return false;
+  }
+
+  protected getLegendItems(): LegendItem[] {
+    return this.option.series
+      .filter((s) => s.name)
+      .map((s, i) => ({
+        name: s.name as string,
+        color: this.seriesColor(i, s.color),
+      }));
+  }
+
+  protected drawSeries(
+    ctx: ICanvas2D,
+    layout: LayoutResult,
+    option: RadarChartOption
+  ): void {
+    const { plot } = layout;
+    const centerX = plot.x + plot.width / 2;
+    const centerY = plot.y + plot.height / 2;
+    const radius =
+      option.radius ?? Math.min(plot.width, plot.height) / 2 * 0.6;
+    const count = option.indicators.length;
+    if (count === 0 || radius <= 0) {
+      return;
+    }
+
+    const startAngle = option.startAngle ?? -Math.PI / 2;
+    const step = TWO_PI / count;
+    const splitCount = Math.max(1, option.splitCount ?? 5);
+    const gridColor = option.gridColor ?? '#ebedf0';
+    const gridLineWidth = option.gridLineWidth ?? 1;
+
+    const vertexAngle = (index: number): number =>
+      startAngle + index * step;
+
+    const polarPoint = (angle: number, r: number): PolarPoint => ({
+      x: centerX + Math.cos(angle) * r,
+      y: centerY + Math.sin(angle) * r,
+    });
+
+    // 网格层：同心多边形
+    for (let layer = 1; layer <= splitCount; layer += 1) {
+      const r = (radius * layer) / splitCount;
+      ctx.save();
+      ctx.strokeStyle = gridColor;
+      ctx.lineWidth = gridLineWidth;
+      ctx.beginPath();
+      for (let i = 0; i < count; i += 1) {
+        const p = polarPoint(vertexAngle(i), r);
+        if (i === 0) {
+          ctx.moveTo(p.x, p.y);
+        } else {
+          ctx.lineTo(p.x, p.y);
+        }
+      }
+      ctx.closePath();
+      ctx.stroke();
+      ctx.restore();
+    }
+
+    // 指标轴线
+    ctx.save();
+    ctx.strokeStyle = gridColor;
+    ctx.lineWidth = gridLineWidth;
+    ctx.beginPath();
+    for (let i = 0; i < count; i += 1) {
+      const p = polarPoint(vertexAngle(i), radius);
+      ctx.moveTo(centerX, centerY);
+      ctx.lineTo(p.x, p.y);
+    }
+    ctx.stroke();
+    ctx.restore();
+
+    // 指标标签（顶点外侧）
+    const labelFontSize = option.labelFontSize ?? 11;
+    applyFont(ctx, labelFontSize);
+    ctx.fillStyle = option.labelColor ?? '#323233';
+    for (let i = 0; i < count; i += 1) {
+      const p = polarPoint(vertexAngle(i), radius + 12);
+      ctx.textAlign = Math.abs(p.x - centerX) < 1 ? 'center' : p.x > centerX ? 'left' : 'right';
+      ctx.textBaseline =
+        Math.abs(p.y - centerY) < 1
+          ? 'middle'
+          : p.y > centerY
+            ? 'top'
+            : 'bottom';
+      ctx.fillText(option.indicators[i].name, p.x, p.y);
+    }
+
+    // 系列区域 / 折线
+    option.series.forEach((series, seriesIndex) => {
+      const color = this.seriesColor(seriesIndex, series.color);
+      const points: PolarPoint[] = option.indicators.map((indicator, i) => {
+        const max =
+          indicator.max ?? this.indicatorMax(option, i);
+        const value = series.data[i] ?? 0;
+        const ratio = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;
+        return polarPoint(vertexAngle(i), radius * ratio);
+      });
+
+      if (series.area !== false) {
+        ctx.save();
+        ctx.fillStyle = color;
+        ctx.globalAlpha = 0.2;
+        ctx.beginPath();
+        this.tracePolygon(ctx, points);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+      }
+
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = series.lineWidth ?? 2;
+      ctx.lineJoin = 'round';
+      ctx.beginPath();
+      this.tracePolygon(ctx, points);
+      ctx.closePath();
+      ctx.stroke();
+      ctx.restore();
+    });
+  }
+
+  private indicatorMax(option: RadarChartOption, index: number): number {
+    let max = 0;
+    for (const series of option.series) {
+      const v = series.data[index] ?? 0;
+      if (v > max) {
+        max = v;
+      }
+    }
+    return max;
+  }
+
+  private tracePolygon(ctx: ICanvas2D, points: readonly PolarPoint[]): void {
+    if (points.length === 0) {
+      return;
+    }
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i += 1) {
+      ctx.lineTo(points[i].x, points[i].y);
+    }
+  }
+}
+
+const TWO_PI = Math.PI * 2;