zan-grid-charts

zan-grid 与 zan-charts 的桥接包，用于将网格范围数据快速映射为图表。

功能特性

• 将网格列定义映射为图表序列标签
• 支持 bar、line、area、combo 图表类型
• 透传缩放、工具栏、图例、点击等图表能力
• 提供统一句柄：更新数据、导出、销毁

安装

npm install zan-grid-charts

快速开始

import { createGridRangeChart } from 'zan-grid-charts'

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

const handle = createGridRangeChart({
  columns: [
    { field: 'department', header: '部门' },
    { field: 'sales', header: '销售额' },
    { field: 'trend', header: '趋势' }
  ],
  categoryField: 'department',
  valueFields: ['sales', 'trend'],
  data: [
    { department: '技术', sales: 120, trend: 110 },
    { department: '人事', sales: 80, trend: 90 }
  ],
  options: {
    container,
    type: 'combo',
    title: '部门销售对比',
    chartSeriesTypes: ['bar', 'line'],
    enableZoom: true,
    toolbar: {
      enabled: true,
      showResetZoom: true,
      showExportPng: true,
      showExportSvg: true
    }
  }
})

// 更新数据
handle.update?.([
  { department: '技术', sales: 132, trend: 118 },
  { department: '人事', sales: 86, trend: 95 }
])

createGridRangeChart API

createGridRangeChart(payload) 返回 GridRangeChartHandle：

• update(data)：更新图表数据
• resetZoom()：重置缩放
• toSvgString()：导出 SVG 字符串
• toDataUrl(type?)：导出 data URL
• download(filename?, type?)：下载图片
• destroy()：销毁图表

Payload 关键字段

• columns：网格列定义（用于 label 映射）
• categoryField：类目字段
• valueFields：值字段列表
• data：图表数据
• options.container：挂载容器（必填）
• options.type：图表类型
• options.chartSeriesTypes：组合图各序列类型
• options.toolbar：工具栏配置
• options.hooks：交互钩子透传

开发

npm run test
npm run build