zan-charts

轻量级图表核心库，提供柱状图、折线图、面积图和组合图（combo）能力。

功能特性

• 支持图表类型：bar、line、area、combo
• 支持图例点击显隐序列
• 支持缩放窗口（含拖拽 brush）
• 支持 PNG / SVG 导出
• 支持主题、坐标轴格式化、工具栏开关
• 提供钩子：图例切换、缩放变化、点位点击

安装

npm install zan-charts

快速开始

import { createChart } from 'zan-charts'

const container = document.getElementById('chart') as HTMLElement

const chart = createChart(container, {
  type: 'line',
  title: '销售趋势',
  categoryField: 'month',
  series: [
    { field: 'sales', label: '销售额' },
    { field: 'profit', label: '利润', type: 'area' }
  ],
  data: [
    { month: '1月', sales: 120, profit: 35 },
    { month: '2月', sales: 150, profit: 42 }
  ],
  enableZoom: true,
  toolbar: {
    enabled: true,
    showResetZoom: true,
    showExportPng: true,
    showExportSvg: true
  }
})

// 后续更新
chart.update({
  data: [
    { month: '3月', sales: 180, profit: 56 }
  ]
})

createChart API

createChart(container, options) 返回 ZanChartHandle：

• update(partialOptions)：局部更新配置或数据
• resetZoom()：重置缩放窗口
• toSvgString()：导出 SVG 字符串
• toDataUrl(type?)：导出 data URL（image/png / image/svg+xml）
• download(filename?, type?)：下载图片
• destroy()：销毁图表

核心配置（ZanChartOptions）

• type：图表类型，默认 bar
• title：图表标题
• categoryField：类目字段（必填）
• series：序列定义（必填）
• data：数据数组（必填）
• width / height：图表尺寸
• showLegend：是否显示图例
• hiddenSeries：默认隐藏的序列字段
• enableZoom / zoomWindow：缩放配置
• xAxisFormatter / yAxisFormatter：坐标轴格式化
• toolbar：工具栏选项（重置缩放、导出按钮等）
• hooks：交互钩子（onLegendToggle、onZoomChange、onPointClick）

开发

npm run test
npm run build