@ datafe- open/ markdown- 图表表
Markdown Chart的交互式桌面渲染器,以AG Grid社区为基础. 这个 支持键入排序和过滤器、按需快速搜索、绑定列, 结构化数字/日期格式化、变化指标、条、进度单元格、, 和内置SVG火花.
在构建自定义注册时直接安装 :
pnpm add ag-grid-community @datafe-open/markdown-chart-table
import { ChartRendererRegistry } from '@datafe-open/markdown-chart';
import {
createTableDataViewProvider,
createTableRenderer,
} from '@datafe-open/markdown-chart-table';
const registry = new ChartRendererRegistry();
const options = { resolveDataRef, validateDataRef };
registry.register(createTableRenderer(options));
registry.registerDataViewProvider(createTableDataViewProvider(options));
React 和 Vue 零配置组件注册两个集成 自动。 只有在用户打开表格数据时才装入提供者 视图。 如果无法加载,则核心 HTML 数据视图仍然可用.
使用 renderer: "table" 带有条形表格数据:
```markdown-chart
{
"version": 1,
"renderer": "table",
"data": {
"kind": "inline",
"source": [
{ "region": "华东", "sales": 1280000, "growth": 0.18, "apr": 31, "may": 36, "jun": 42 },
{ "region": "华南", "sales": 960000, "growth": -0.04, "apr": 27, "may": 26, "jun": 25 }
]
},
"spec": {
"title": "区域销售",
"height": 420,
"columns": [
{ "field": "region", "title": "区域", "pinned": "left" },
{ "field": "sales", "title": "销售额", "type": "number", "format": { "style": "currency", "currency": "CNY", "notation": "compact" } },
{ "field": "growth", "title": "同比", "type": "number", "format": { "style": "percent" }, "cell": { "kind": "change", "polarity": "higher-is-better" } },
{ "id": "trend", "title": "近三月", "cell": { "kind": "sparkline", "fields": ["apr", "may", "jun"], "labels": ["4月", "5月", "6月"], "scale": "column" } }
],
"initialSort": [{ "field": "sales", "direction": "desc" }]
}
}
```
columns 接受1–50个条目。 列可以绑定源 field,或使用
id 以导出一丝火花。 类型是 string, (中文(简体) ), number, (中文(简体) ), date,以及
boolean; 日期列需要ISO日期或带有时区的时间戳,并且是
在协调世界时显示。 只有在每个非正数值为时才会推断出数字
只有当每个非正数值为布尔时, 数字和布尔值才为布尔; 日期永远不会
推断.
默认的表格预算为一万行和20万个已实现单元格(row)
乘以源字段的结合)。 推导出列的上限为
50. 以
createTableRenderer({ limits }) 并传递同样的选项
createTableDataViewProvider从紧凑的页脚打开搜索并关闭
以 Escape 或 toggle 清除快速过滤器。 从
标题; 浮动过滤器输入被隐藏。 UI不提供导出.
现有 serializeTableCsv 求助者仍然可以求助.