PureRenderer

PureRenderer 根据可视化规格渲染单个只读图表。它具有最小化的 UI — 没有工具栏、没有图表标签页、没有字段列表。这使其非常适合在仪表板、文章或任何需要静态可视化的场景中嵌入图表。

import { PureRenderer } from '@kanaries/graphic-walker';

使用场景

组件	可交互	工具栏	多图表	字段列表
`GraphicWalker`	完整编辑	是	是	是
`GraphicRenderer`	仅查看	是	是	否
`PureRenderer`	仅查看	否	否	否

当你需要以最小的占用空间展示图表时，使用 PureRenderer。

属性

本地模式（客户端数据）

属性	类型	必填	说明
`rawData`	`IRow[]`	是	数据记录数组。
`type`	`'local'`	否	显式设置为本地模式（默认）。

远程模式（服务端数据）

属性	类型	必填	说明
`computation`	`IComputationFunction`	是	用于服务端处理的计算函数。
`type`	`'remote'`	是	必须设置为 `'remote'`。

可视化状态

属性	类型	必填	说明
`visualState`	`DraggableFieldState`	是	字段编码（行、列、颜色、大小等）。
`visualConfig`	`IVisualConfigNew`	是	可视化配置（聚合、几何类型、坐标系）。
`visualLayout`	`IVisualLayout`	否	布局配置（大小、堆叠模式、格式化）。未提供时回退到 `visualConfig`。

外观属性

属性	类型	默认值	说明
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	暗色模式设置。
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	图表主题。
`uiTheme`	`IUIThemeConfig`	`undefined`	自定义 UI 颜色。
`overrideSize`	`{ mode: 'auto' \| 'fixed' \| 'full'; width: number; height: number }`	`undefined`	覆盖规格中的大小。
`scales`	`IChannelScales`	`undefined`	自定义比例尺配置。

其他属性

属性	类型	说明
`name`	`string`	图表名称（用于导出）。
`className`	`string`	根元素的 CSS 类名。
`locale`	`string`	数字/日期格式化的语言环境。默认为 `'en-US'`。
`disableCollapse`	`boolean`	禁用可折叠图表容器。

示例

本地模式

import { PureRenderer } from '@kanaries/graphic-walker';
import type { DraggableFieldState, IVisualConfigNew, IVisualLayout } from '@kanaries/graphic-walker';
 
const data = [
  { category: 'A', value: 100 },
  { category: 'B', value: 200 },
  { category: 'C', value: 150 },
];
 
const visualState: DraggableFieldState = {
  dimensions: [],
  measures: [],
  rows: [{ fid: 'value', name: 'Value', analyticType: 'measure', semanticType: 'quantitative' }],
  columns: [{ fid: 'category', name: 'Category', analyticType: 'dimension', semanticType: 'nominal' }],
  color: [],
  opacity: [],
  size: [],
  shape: [],
  theta: [],
  radius: [],
  longitude: [],
  latitude: [],
  geoId: [],
  details: [],
  filters: [],
  text: [],
};
 
const visualConfig: IVisualConfigNew = {
  defaultAggregated: true,
  geoms: ['bar'],
  coordSystem: 'generic',
  limit: -1,
};
 
const visualLayout: IVisualLayout = {
  showTableSummary: false,
  stack: 'stack',
  showActions: false,
  interactiveScale: false,
  zeroScale: true,
  size: { mode: 'auto', width: 600, height: 400 },
  format: {},
  resolve: {},
};
 
function ChartEmbed() {
  return (
    <PureRenderer
      rawData={data}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

远程模式

import { PureRenderer } from '@kanaries/graphic-walker';
import type { IComputationFunction } from '@kanaries/graphic-walker';
 
const computation: IComputationFunction = async (payload) => {
  const res = await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return res.json();
};
 
function RemoteChart() {
  return (
    <PureRenderer
      type="remote"
      computation={computation}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

固定大小

<PureRenderer
  rawData={data}
  visualState={visualState}
  visualConfig={visualConfig}
  overrideSize={{ mode: 'fixed', width: 400, height: 300 }}
/>

从 GraphicWalker 提取状态

你可以通过 storeRef 从 GraphicWalker 实例获取 visualState、visualConfig 和 visualLayout，然后将它们传给 PureRenderer：

import { useRef } from 'react';
import { GraphicWalker, PureRenderer } from '@kanaries/graphic-walker';
import type { VizSpecStore } from '@kanaries/graphic-walker';
 
function App() {
  const storeRef = useRef<VizSpecStore>(null);
 
  const handleExport = () => {
    if (!storeRef.current) return;
    const chart = storeRef.current.exportCurrentChart();
    // chart contains encodings, config, layout
    // Pass these to PureRenderer elsewhere
  };
 
  return <GraphicWalker data={data} fields={fields} storeRef={storeRef} />;
}

GraphicRenderer TableWalker