迷你图 0.5.2+
| Facade API | 可付费升级 | 需要 Univer 服务端 | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | ✅ | - | ✅ | UniverSheetsAdvancedPreset |
迷你图是一种简洁、直观的小型图表，通常嵌入在表格单元格中，用于快速展示数据趋势或关键指标。
该功能包含以下插件包：
@univerjs-pro/sheets-sparkline迷你图插件@univerjs-pro/sheets-sparkline-ui迷你图 UI 插件
Presets 安装
按照 打印功能 中的引导安装即可。
手动组合安装
npm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uiimport { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline';
import { UniverSheetSparklineUIPlugin } from '@univerjs-pro/sheets-sparkline-ui';
import SheetsSparklineUIZhCN from '@univerjs-pro/sheets-sparkline-ui/locale/zh-CN';
import '@univerjs-pro/sheets-sparkline/facade';
import '@univerjs-pro/sheets-sparkline-ui/lib/index.css';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
locales: {
[LocaleType.ZH_CN]: merge(
SheetsSparklineUIZhCN
),
},
});
univer.registerPlugin(UniverSheetSparklinePlugin);
univer.registerPlugin(UniverSheetSparklineUIPlugin);Univer on Node.js 手动组合安装
npm install @univerjs-pro/sheets-sparklineimport { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline';
import '@univerjs-pro/sheets-sparkline/facade';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
});
univer.registerPlugin(UniverSheetSparklinePlugin);Facade API
完整 facade api 类型定义，请查看 FacadeAPI
添加迷你图
FWorksheet.addSparkline 方法用于在指定区域添加迷你图。
const fSheet = univerAPI.getActiveWorkbook().getActiveSheet();
fSheet.addSparkline(
[{ startRow: 0, endRow: 1, startColumn: 0, endColumn: 0 }],
[{ startRow: 2, endRow: 2, startColumn: 0, endColumn: 0 }]
);组合迷你图和取消组合迷你图
FWorksheet.composeSparkline 和 FWorksheet.unComposeSparkline 方法用于组合和取消组合迷你图。
const fSheet = univerAPI.getActiveWorkbook().getActiveSheet();
fSheet.composeSparkline([{ startRow: 0, endRow: 10, startColumn: 0, endColumn: 10 }]);
fSheet.unComposeSparkline([{ startRow: 0, endRow: 10, startColumn: 0, endColumn: 10 }]);获取迷你图和迷你图组实例
FWorksheet.getSparklineByCell 用于获取指定单元格内的迷你图实例。
FWorksheet.getSparklineGroupByCell 用于获取指定单元格内的迷你图组实例。
const fSheet = univerAPI.getActiveWorkbook().getActiveSheet();
const sparkline = fSheet.getSparklineByCell(2, 0);
const sparklineGroup = fSheet.getSparklineGroupByCell(2, 0);迷你图和迷你图组实例中各有一些方法用来操作迷你图和迷你图组
FSparkline
| 方法 | 描述 |
|---|---|
| changeDataSource | 修改当前单元格内迷你图的数据源和放置位置 |
| removeSparkline | 删除当前单元格内的迷你图 |
FSparklineGroup
| 方法 | 描述 |
|---|---|
| changeDataSource | 修改当前单元格内迷你图组的数据源和放置位置 |
| removeSparklineGroup | 删除当前单元格内的迷你图所在的迷你图组 |
| setConfig | 更改当前单元格内的迷你图所在的迷你图组的配置 |
Last updated on