Mini-graphique
Un mini-graphique est un graphique compact intégré qui représente visuellement les tendances des données ou des indicateurs clés, généralement dans une cellule de tableau.
Mode plugin
Installation
pnpm add @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uinpm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uiyarn add @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uibun add @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uiUtilisation
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline'import { UniverSheetSparklineUIPlugin } from '@univerjs-pro/sheets-sparkline-ui'import SheetsSparklineUIEnUS from '@univerjs-pro/sheets-sparkline-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/sheets-sparkline/facade'import '@univerjs-pro/sheets-sparkline-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsSparklineUIEnUS, ), },})univer.registerPlugin(UniverSheetSparklinePlugin)univer.registerPlugin(UniverSheetSparklineUIPlugin)Si vous disposez d’une licence commerciale Univer, consultez Utiliser une licence côté client pour la configuration.
Prise en charge mobile
Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs-pro/sheets-sparkline-ui | UniverSheetSparklineUIPlugin | UniverSheetSparklineMobileUIPlugin |
Mode prédéfini
La fonctionnalité de mini-graphiques est incluse dans le preset @univerjs/preset-sheets-advanced.
Installation
Le preset UniverSheetsAdvancedPreset de @univerjs/preset-sheets-advanced dépend du preset UniverSheetsDrawingPreset lors de l’exécution. Installez d’abord @univerjs/preset-sheets-drawing.
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancednpm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedyarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedbun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedUtilisation
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'import '@univerjs/preset-sheets-advanced/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsDrawingEnUS, UniverPresetSheetsAdvancedEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset(), ],})Si vous disposez d’une licence commerciale Univer, consultez Utiliser une licence côté client pour la configuration.
Facade API
Importation
Remarque sur le mode plugin
Seul le mode plugin nécessite l’importation manuelle du package Facade. Le mode prédéfini inclut déjà le package Facade correspondant : aucune importation supplémentaire n’est nécessaire.
import '@univerjs-pro/sheets-sparkline/facade'Ajouter un mini-graphique
La méthode FWorksheet.addSparkline ajoute un mini-graphique dans la plage indiquée et renvoie une instance de FSparkline.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a sparkline with data source from A1:A7, placed in cell A10.const sourceRanges = [fWorksheet.getRange('A1:A7').getRange()]const targetRanges = [fWorksheet.getRange('A10').getRange()]const sparkline = fWorksheet.addSparkline(sourceRanges, targetRanges, univerAPI.Enum.SparklineTypeEnum.LINE_CHART)Regrouper et dissocier des mini-graphiques
Les méthodes FWorksheet.composeSparkline et FWorksheet.unComposeSparkline permettent de regrouper et de dissocier des mini-graphiques.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a sparkline with data source from A1:A7, placed in cell A10.const firstSparkline = fWorksheet.addSparkline( [fWorksheet.getRange('A1:A7').getRange()], [fWorksheet.getRange('A10').getRange()],)// Create a sparkline with data source from B1:B7, placed in cell B10.const secondSparkline = fWorksheet.addSparkline( [fWorksheet.getRange('B1:B7').getRange()], [fWorksheet.getRange('B10').getRange()],)// Compose the two sparklines into a sparkline groupfWorksheet.composeSparkline([fWorksheet.getRange('A10:B10').getRange()])console.log(fWorksheet.getAllSubSparkline().size) // 1// After 3 seconds, uncompose the sparkline groupsetTimeout(() => { fWorksheet.unComposeSparkline([fWorksheet.getRange('A10:B10').getRange()]) console.log(fWorksheet.getAllSubSparkline().size) // 2}, 3000)Obtenir des instances de mini-graphique et de groupe de mini-graphiques
FWorksheet.getSparklineByCell récupère le mini-graphique d’une cellule donnée et renvoie une instance de FSparkline.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a sparkline with data source from A1:A7, placed in cell A10.const sourceRanges = [fWorksheet.getRange('A1:A7').getRange()]const targetRanges = [fWorksheet.getRange('A10').getRange()]const sparkline = fWorksheet.addSparkline(sourceRanges, targetRanges)console.log('Cell A10: ', fWorksheet.getSparklineByCell(9, 0))console.log('Cell A11: ', fWorksheet.getSparklineByCell(10, 0))FWorksheet.getSparklineGroupByCell récupère le groupe de mini-graphiques d’une cellule donnée et renvoie une instance de FSparklineGroup.
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a sparkline with data source from A1:A7, placed in cell A10.const firstSparkline = fWorksheet.addSparkline( [fWorksheet.getRange('A1:A7').getRange()], [fWorksheet.getRange('A10').getRange()],)// Create a sparkline with data source from B1:B7, placed in cell B10.const secondSparkline = fWorksheet.addSparkline( [fWorksheet.getRange('B1:B7').getRange()], [fWorksheet.getRange('B10').getRange()],)console.log('Cell A10: ', fWorksheet.getSparklineGroupByCell(9, 0))// After 3 seconds, compose the two sparklines into a sparkline groupsetTimeout(() => { fWorksheet.composeSparkline([fWorksheet.getRange('A10:B10').getRange()]) console.log('Cell A10: ', fWorksheet.getSparklineGroupByCell(9, 0))}, 3000)Une instance de FSparkline propose les méthodes suivantes pour manipuler le mini-graphique :
| Méthode | Description |
|---|---|
| changeDataSource | Modifie la source de données et l’emplacement du mini-graphique dans la cellule active |
| removeSparkline | Supprime le mini-graphique de la cellule active |
Une instance de FSparklineGroup propose les méthodes suivantes pour manipuler le groupe de mini-graphiques :
| Méthode | Description |
|---|---|
| changeDataSource | Modifie la source de données et l’emplacement du groupe de mini-graphiques dans la cellule active |
| removeSparklineGroup | Supprime le groupe de mini-graphiques de la cellule active |
| setConfig | Modifie la configuration du groupe de mini-graphiques dans la cellule active |
Écouteurs d’événements
Vous trouverez les définitions de types complètes des événements dans la documentation Events.
L’événement univerAPI.Event.SheetSparklineChanged est déclenché lorsqu’un mini-graphique change.
const disposable = univerAPI.addEvent(univerAPI.Event.SheetSparklineChanged, (params) => { const { workbook, worksheet, sparklines } = params})// Remove the event listener, use `disposable.dispose()`Couleurs et options d’affichage
Utilisez FSparklineGroup.setConfig() pour configurer les couleurs et l’affichage de tout le groupe. Il n’existe pas de méthode distincte FSparkline.setColor(). Pour une couleur personnalisée, définissez seriesColor et themeType: SparklineThemeTypeEnum.CUSTOM. Consultez la configuration des groupes de sparklines pour les options et exemples concernant les marqueurs, les axes, les extrema, les cellules vides ou masquées et l’épaisseur des lignes.
Que pensez-vous de ce guide ?