Sparkline
Sparkline es un gráfico en línea compacto que proporciona una visualización representación de tendencias de datos o métricas clave, generalmente incrustadas dentro de una celda de tabla.
Modo de complemento
Instalación
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-uiUso
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 tiene una licencia comercial para Univer, consulte Uso de licencia en el cliente para la configuración.
Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs-pro/sheets-sparkline-ui | UniverSheetSparklineUIPlugin | UniverSheetSparklineMobileUIPlugin |
Modo preestablecido
La característica minigráfico está incluida en el ajuste preestablecido @univerjs/preset-sheets-advanced.
Instalación
El ajuste preestablecido UniverSheetsAdvancedPreset de @univerjs/preset-sheets-advanced depende del ajuste preestablecido UniverSheetsDrawingPreset en tiempo de ejecución. Primero instale @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-advancedUso
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 tiene una licencia comercial para Univer, consulte Uso de la licencia en el cliente para la configuración.
API de Facade
Importación
Plugin mode note
Solo el modo complemento requiere importar manualmente el paquete Facade. El modo preestablecido ya incluye el paquete Facade correspondiente, por lo que no se necesita ninguna importación adicional.
import '@univerjs-pro/sheets-sparkline/facade'Agregar minigráfico
El método FWorksheet.addSparkline se utiliza para agregar un minigráfico en el rango especificado, devolviendo una instancia 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)Componer y descomponer minigráfico
Los métodos FWorksheet.composeSparkline y FWorksheet.unComposeSparkline se utilizan para componer y descomponer minigráficos.
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)Obtener minigráfico y grupo de minigráficos. Instancias
FWorksheet.getSparklineByCell se usa para obtener la instancia del minigráfico en una celda específica, devolviendo una instancia 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 se usa para obtener la instancia del grupo de minigráficos en una celda específica, devolviendo un FSparklineGroup instancia.
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)FSparkline la instancia tiene los siguientes métodos para manipular el minigráfico:
| Method | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline in the current cell |
| removeSparkline | Remove the sparkline in the current cell |
FSparklineGroup la instancia tiene los siguientes métodos para manipular el minigráfico:
| Method | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline group in the current cell |
| removeSparklineGroup | Remove the sparkline group in the current cell |
| setConfig | Change the configuration of the sparkline group in the current cell |
Evento Oyentes
Las definiciones completas de los tipos de eventos se pueden encontrar en Eventos.
El evento univerAPI.Event.SheetSparklineChanged se activa cuando cambia el minigráfico.
const disposable = univerAPI.addEvent(univerAPI.Event.SheetSparklineChanged, (params) => { const { workbook, worksheet, sparklines } = params})// Remove the event listener, use `disposable.dispose()`Colores y opciones de visualización
Utiliza FSparklineGroup.setConfig() para configurar los colores y la visualización de todo el grupo. No existe un método independiente FSparkline.setColor(). Para usar un color personalizado, configura tanto seriesColor como themeType: SparklineThemeTypeEnum.CUSTOM. Consulta la configuración de grupos de minigráficos para ver todas las opciones y ejemplos de marcadores, ejes, valores extremos, celdas vacías u ocultas y grosor de línea.
¿Cómo es esta guía?