Sparkline 0.5.2+
| Facade API | Paid Version | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | ✅ | - | ✅ | - |
A sparkline is a concise and intuitive small chart, typically embedded within table cells, used to quickly showcase data trends or key metrics.
Install
npm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uiimport { 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
Add Sparkline
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}])
composeSparkline & unComposeSparkline
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}])
FSparkline & FSparklineGroup
The fWorksheet instance provides methods to retrieve sparkline and sparkline group instances based on cell positions.
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);
Both sparkline and sparkline group instances include a set of methods for managing and manipulating sparklines and sparkline groups.
FSparkline
| Methods | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline in the current cell. |
| removeSparkline | Remove the sparkline in the current cell. |
FSparklineGroup
| Methods | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline group in the current cell. |
| removeSparklineGroup | Remove the sparkline group containing the sparkline in the current cell. |
| setConfig | Change the configuration of the sparkline group in the current cell. |
Was this page helpful?