@canvas-components/chart

@canvas-components/chart 是一个纯原生的 Canvas 图表渲染包，提供通用图表宿主、渲染器注册机制，以及内建的 sparkline 迷你图能力。

功能作用

• 提供 CanvasChart 原生图表宿主
• 提供统一的图表绘制入口和渲染器注册机制
• 内建 sparkline 折线 / 柱状迷你图
• 支持 tooltip、指示器动画、自动尺寸监听

安装方法

pnpm add @canvas-components/chart

最低环境要求：

• Node.js >= 18.12.0
• pnpm >= 9.0.0

使用方法

import { CanvasChart, type CanvasChartSparklineOption } from "@canvas-components/chart";

const option: CanvasChartSparklineOption = {
  tooltip: { show: true, trigger: "axis" },
  series: [
    {
      type: "line",
      data: [12, 24, 18, 31, 26, 40],
      smooth: true,
    },
  ],
};

const container = document.querySelector("#sparkline") as HTMLElement;
const chart = new CanvasChart(container, {
  type: "sparkline",
  option,
});

chart.mount();

属性说明

CanvasChartOptions

| 属性 | 类型 | 说明 | | --- | --- | --- | | type | string | 图表类型，内建可用 sparkline | | option | Option | 对应图表的配置对象 | | width | number | 固定宽度，不传时读取容器 | | height | number | 固定高度，不传时读取容器 | | autoResize | boolean | 是否监听容器尺寸变化自动重绘 | | pixelRatio | number | 画布像素倍率 | | animationProgress | number | 外部驱动动画进度 |

CanvasChartSparklineOption

| 属性 | 类型 | 说明 | | --- | --- | --- | | grid | CanvasChartSparklineGridOption | 网格和边距配置 | | xAxis | CanvasChartSparklineXAxisOption | X 轴配置 | | yAxis | CanvasChartSparklineYAxisOption | Y 轴配置 | | tooltip | CanvasChartSparklineTooltipOption | tooltip 配置 | | animation | boolean \| CanvasChartSparklineAnimationOption | 动画配置 | | series | CanvasChartSparklineSeriesOption \| CanvasChartSparklineSeriesOption[] | 系列配置 |

CanvasChartSparklineSeriesOption

| 属性 | 类型 | 说明 | | --- | --- | --- | | type | "line" \| "bar" | 系列类型 | | name | string | 系列名称 | | data | number[] | 数据数组 | | smooth | boolean | 折线是否平滑，仅 line | | showSymbol | boolean | 是否显示折线拐点，仅 line | | symbolSize | number | 拐点大小，仅 line | | lineStyle | CanvasChartLineStyleOption | 折线样式 | | areaStyle | CanvasChartAreaStyleOption | 区域填充样式，仅 line | | itemStyle | CanvasChartItemStyleOption | 点或柱子的样式 | | barWidth | number | 柱宽，仅 bar |

方法说明

实例方法

| 方法 | 签名 | 说明 | | --- | --- | --- | | mount | () => void | 挂载图表并绑定监听 | | updateOptions | (options) => void | 更新配置并重绘 | | getCanvasElement | () => HTMLCanvasElement | 获取内部 canvas 节点 | | render | () => void | 手动重绘 | | destroy | () => void | 销毁实例 |

导出函数

| 方法 | 签名 | 说明 | | --- | --- | --- | | drawCanvasChartToCanvas | (options) => void | 统一入口直接绘制图表 | | registerCanvasChartRenderer | (definition) => void | 注册自定义图表渲染器 | | getCanvasChartRenderer | (type) => CanvasChartRendererDefinition \| undefined | 获取渲染器 | | drawSparklineToCanvas | (options) => void | 直接绘制 sparkline | | resolveSparklinePoints | (options) => SparklinePoint[] | 解析折线点位 | | resolveCanvasChartTooltipContent | (options) => CanvasChartTooltipContent \| undefined | 解析 tooltip 内容 | | resolveCanvasChartTooltipDataIndex | (options) => number \| undefined | 解析命中的数据索引 |

自定义渲染器

当你需要接入自定义图表类型时，可以通过 registerCanvasChartRenderer 注册：

import { registerCanvasChartRenderer } from "@canvas-components/chart";

registerCanvasChartRenderer({
  type: "custom",
  draw(options) {
    // 自定义绘制逻辑
  },
});