指南Univer Sheets功能迷你图Pro

迷你图 0.5.2+

Facade API付费版本需要 Univer 服务端Univer on Node.jsPreset
--

迷你图是一种简洁、直观的小型图表,通常嵌入在表格单元格中,用于快速展示数据趋势或关键指标。

安装

npm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-ui
import { LocaleType, Tools } from '@univerjs/core';
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-ui/lib/index.css';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      SheetsSparklineUIZhCN
    ),
  },
});
 
univer.registerPlugin(UniverSheetSparklinePlugin);
univer.registerPlugin(UniverSheetSparklineUIPlugin);

Facade API

添加迷你图

const univerAPI = FUniver.newAPI(univer);
const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
fSheet.addSparkline([{startRow:0, endRow:1, startColumn:0, endColumn:0}],[{startRow:2, endRow:2, startColumn:0, endColumn:0}])

组合迷你图和取消组合迷你图

 
const univerAPI = FUniver.newAPI(univer);
const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
 
fSheet.composeSparkline([{startRow:0, endRow:10, startColumn:0, endColumn:10}])
fSheet.unComposeSparkline([{startRow:0, endRow:10, startColumn:0, endColumn:10}])
 

FSparklineFSparklineGroup

在 fWorksheet 实例上提供了根据单元格位置获取迷你图和迷你图组实例的方法

 
const univerAPI = FUniver.newAPI(univer);
const fWorkbook = univerAPI.getActiveWorkbook();
const unitId = fWorkbook.getId();
const fSheet = fWorkbook.getActiveSheet();
const subUnitId = fSheet.getSheetId();
 
const sparkline = fSheet.getSparklineByCell(2,0);
 
const sparklineGroup = fSheet.getSparklineGroupByCell(2,0);
 

迷你图和迷你图组实例中各有一些方法用来操作迷你图和迷你图组

FSparkline

方法描述
changeDataSource修改当前单元格内迷你图的数据源和放置位置
removeSparkline删除当前单元格内的迷你图

FSparklineGroup

方法描述
changeDataSource修改当前单元格内迷你图组的数据源和放置位置
removeSparklineGroup删除当前单元格内的迷你图所在的迷你图组
setConfig更改当前单元格内的迷你图所在的迷你图组的配置

这个页面对您有帮助吗?