Une feuille de calcul n'est pas toujours qu'une simple grille de nombres. Parfois, c'est une toile — un organigramme esquissé entre des blocs de données, un diagramme de relations reliant des équipes à des projets, une légende pointant d'une note vers la cellule qu'elle annote. Dans chacun de ces cas, l'élément manquant est une ligne : un trait droit entre deux cases, un arc courbe autour d'une zone, un connecteur coudé qui plie une fois puis continue.

Spire.XLS for JavaScript offre à une application React la méthode sheet.Lines.AddLine() pour insérer des formes de ligne à une position spécifiée, avec quatre types de lignes disponibles via l'énumération LineShapeType et un contrôle total sur le style de tiret, la couleur et l'épaisseur. Tout s'exécute dans le navigateur sur WebAssembly — pas de backend, pas d'automatisation Excel, pas de téléversement de fichier.

Pour la configuration du projet, consultez Intégrer Spire.XLS for JavaScript dans un projet React. Les exemples ci-dessous supposent que le package est installé et que le module WebAssembly a été initialisé.

Quand une feuille de calcul a besoin de lignes

Les lignes dans une feuille de calcul répondent à trois grands objectifs, et le type de ligne que vous choisissez dépend de celui qui se présente à vous :

Le cas de la pointe de flèche — où la ligne doit indiquer une direction — utilise une API différente, TypedLines.AddLine(), qui prend en charge des styles de flèche aux deux extrémités et un positionnement précis au pixel près. Cela est traité séparément dans Ajouter des connecteurs fléchés dans Excel en JavaScript (React). Cet article se concentre sur Lines.AddLine(), qui gère les quatre formes de ligne principales et leur style visuel.

Prérequis

Vous avez besoin d'un projet React avec Spire.XLS for JavaScript installé et le module WebAssembly initialisé, accessible à window.wasmModule.spirexls. L'exemple charge une police dans le VFS pour la mesure du texte et enregistre avec l'indicateur de version Excel 2010.

Les quatre types de lignes

LineShapeType expose quatre formes, et la différence entre elles est géométrique — la manière dont la ligne se déplace de son début à sa fin :

Les quatre sont créées par la même méthode — sheet.Lines.AddLine() — le paramètre lineShapeType déterminant celle qui est dessinée. Les propriétés d'apparence (DashStyle, Color, Weight) s'appliquent uniformément aux quatre.

Insérer des lignes dans une feuille de calcul

L'exemple insère un exemplaire de chaque type de ligne dans une nouvelle feuille de calcul, chacun avec un style de tiret et une couleur distincts afin que les quatre formes soient reconnaissables dans le résultat. Les étapes sont les suivantes :

1. Créez un objet Workbook et récupérez la première feuille de calcul.
2. Appelez Worksheet.Lines.AddLine() quatre fois, en passant des paramètres de position et un LineShapeType différent à chaque fois.
3. Personnalisez le DashStyle, la Color et le Weight de chaque ligne.
4. Enregistrez le classeur avec Workbook.SaveToFile().

function App() {
  const addLineShapes = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a straight line - solid, CadetBlue, weight 2, with arrow
    let line1 = sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });
    line1.DashStyle = xlsModule.ShapeDashLineStyleType.Solid;
    line1.Color = xlsModule.Color.get_CadetBlue();
    line1.Weight = 2;
    line1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a curved line - dotted, OrangeRed, weight 2
    let line2 = sheet.Lines.AddLine({ row: 12, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.CurveLine });
    line2.DashStyle = xlsModule.ShapeDashLineStyleType.Dotted;
    line2.Color = xlsModule.Color.get_OrangeRed();
    line2.Weight = 2;

    // Add an elbow connector - DashDotDot, Purple, weight 2
    let line3 = sheet.Lines.AddLine({ row: 14, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.ElbowLine });
    line3.DashStyle = xlsModule.ShapeDashLineStyleType.DashDotDot;
    line3.Color = xlsModule.Color.get_Purple();
    line3.Weight = 2;

    // Add an inverted line - Dashed, Green, weight 2
    let line4 = sheet.Lines.AddLine({ row: 16, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.LineInv });
    line4.DashStyle = xlsModule.ShapeDashLineStyleType.Dashed;
    line4.Color = xlsModule.Color.get_Green();
    line4.Weight = 2;

    // Save the workbook
    const outputFileName = 'AddLineShapes.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Line Shapes</h1>
      <button onClick={addLineShapes}>Start</button>
    </div>
  );
}

export default App;

Quatre types de lignes insérés dans une feuille de calcul : droite, courbe, coudée et inversée

La première ligne définit également EndArrowHeadStyle, ce qui lui donne une pointe de flèche à la fin — Lines.AddLine() prend en charge un seul style de flèche à la fin, mais pas au début. Pour des flèches aux deux extrémités ou un positionnement précis au pixel près, utilisez plutôt TypedLines.AddLine(), traité dans Ajouter des connecteurs fléchés dans Excel en JavaScript (React).

Personnaliser l'apparence des lignes

Trois propriétés contrôlent l'apparence d'une ligne, et elles sont indépendantes — modifier l'une ne réinitialise pas les autres :

Le style de tiret est celui qui vaut la peine d'être expérimenté. Une ligne pleine se lit comme une connexion permanente ; une ligne pointillée se lit comme une connexion provisoire ou facultative ; une ligne en tirets se lit comme une limite. Dans un organigramme où certaines connexions sont conditionnelles, utiliser Solid pour le flux principal et Dashed pour les branches conditionnelles communique la distinction sans légende.

Positionnement par ligne et colonne

Lines.AddLine() place une ligne en utilisant des coordonnées de ligne et de colonne, plus une largeur et une hauteur :

sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });

• row et column définissent le point d'ancrage — là où la ligne commence.
• width définit l'étendue horizontale en pixels.
• height définit l'étendue verticale en pixels. Une hauteur de 1 produit une ligne horizontale ; une largeur de 1 produit une ligne verticale.

Il s'agit d'un système hybride : l'ancre est exprimée en unités de feuille de calcul (lignes et colonnes), mais la taille est en pixels. Cela permet d'aligner facilement une ligne avec une cellule spécifique — passez la ligne et la colonne de cette cellule — mais la longueur doit tenir compte des largeurs de colonnes et des hauteurs de lignes, qui varient. Si vous avez besoin d'un contrôle total au pixel près sur la position de départ ainsi que sur la taille, TypedLines.AddLine() propose Top et Left en pixels.

Problèmes courants

La ligne n'est pas visible dans le résultat. Vérifiez Weight et Color. Une épaisseur de 0 ou une couleur identique à l'arrière-plan produit une ligne invisible. Vérifiez également que row et column placent la ligne dans la plage utilisée de la feuille de calcul — une ligne ancrée à la ligne 1000 sur une feuille vide est dessinée mais hors écran.

La pointe de flèche est absente. EndArrowHeadStyle n'a pas été défini, ou a été défini sur LineNoArrow. Attribuez ShapeArrowStyleType.LineArrow pour afficher une pointe de flèche à la fin de la ligne. Lines.AddLine() ne prend pas en charge BeginArrowHeadStyle — pour des flèches aux deux extrémités, utilisez TypedLines.AddLine().

La ligne coudée va dans une direction inattendue. Un connecteur coudé plie une fois, et la direction du coude dépend des valeurs de width et height. Une largeur positive avec une hauteur positive plie vers le bas à droite ; changer le signe de l'une ou l'autre valeur change la direction du coude. Expérimentez d'abord avec de petites valeurs pour confirmer la forme avant de vous engager dans une grande mise en page.

Les lignes se chevauchent ou s'empilent les unes sur les autres. Chaque appel à AddLine crée une forme indépendante à la position spécifiée. Si deux lignes partagent la même row et la même column, elles se chevauchent. Décalez la valeur de row de 2 ou plus pour chaque ligne successive, comme le fait l'exemple.

FAQ

Quelle est la différence entre Lines.AddLine() et TypedLines.AddLine() ?

Lines.AddLine() positionne par ligne et colonne et ne prend en charge une pointe de flèche qu'à la fin. TypedLines.AddLine() positionne par coordonnées en pixels et prend en charge des pointes de flèche aux deux extrémités. Pour des formes de ligne de base sans flèches directionnelles, Lines.AddLine() est plus simple. Pour des connecteurs nécessitant un placement précis ou des flèches bidirectionnelles, consultez Ajouter des connecteurs fléchés dans Excel en JavaScript (React).

Puis-je créer une ligne verticale ?

Oui. Définissez width sur 1 et height sur une valeur positive. La ligne s'étend vers le bas à partir du point d'ancrage.

Combien de lignes une seule feuille de calcul peut-elle contenir ?

Il n'y a pas de limite stricte dans l'API. Chaque ligne est un objet de forme stocké dans la collection de formes de la feuille de calcul, et la contrainte pratique est la taille du fichier et les performances de rendu lorsque des centaines de formes sont présentes.

Les lignes subsistent-elles si le fichier est ouvert dans Excel ?

Oui. Les lignes sont stockées comme des objets de forme standard dans le XML de la feuille de calcul. Excel les lit et les affiche nativement — ce ne sont pas des artefacts de rendu propres à Spire.XLS.

Puis-je récupérer et modifier des lignes qui existent déjà dans un classeur ?

Oui. Parcourez la collection sheet.Shapes pour accéder aux objets de forme de ligne, puis modifiez leurs propriétés via l'interface ILineShape. Pour la suppression, utilisez sheet.Shapes.Remove(index).

Voir aussi

• Ajouter des connecteurs fléchés dans Excel en JavaScript (React)
• Intégrer Spire.XLS for JavaScript dans un projet React
• Page produit de Spire.XLS for JavaScript

Una hoja de cálculo no siempre es solo una cuadrícula de números. A veces es un lienzo: un diagrama de flujo esbozado entre bloques de datos, un diagrama de relaciones que conecta equipos con proyectos, una llamada que señala desde una nota hasta la celda que anota. En todos estos casos, el elemento que falta es una línea: un trazo recto entre dos cuadros, un arco curvo alrededor de una región, un conector de codo que se dobla una vez y continúa.

Spire.XLS for JavaScript ofrece a una aplicación React el método sheet.Lines.AddLine() para insertar formas de línea en una posición especificada, con cuatro tipos de línea disponibles a través de la enumeración LineShapeType y control total sobre el estilo de guion, el color y el grosor. Todo se ejecuta en el navegador sobre WebAssembly: sin backend, sin automatización de Excel, sin carga de archivos.

Para la configuración del proyecto, consulte Integrar Spire.XLS for JavaScript en un proyecto de React. Los ejemplos a continuación asumen que el paquete está instalado y que el módulo WebAssembly se ha inicializado.

Cuándo una hoja de cálculo necesita líneas

Las líneas en una hoja de cálculo cumplen tres propósitos generales, y el tipo de línea que elija depende de cuál tenga delante:

El caso de la punta de flecha —donde la línea necesita mostrar dirección— usa una API diferente, TypedLines.AddLine(), que admite estilos de flecha en ambos extremos y un posicionamiento con precisión de píxeles. Eso se trata por separado en Añadir conectores de flecha en Excel en JavaScript (React). Este artículo se centra en Lines.AddLine(), que maneja las cuatro formas de línea principales y su estilo visual.

Requisitos previos

Necesita un proyecto React con Spire.XLS for JavaScript instalado y el módulo WebAssembly inicializado, accesible en window.wasmModule.spirexls. El ejemplo carga una fuente en el VFS para la medición de texto y guarda con el indicador de versión de Excel 2010.

Los cuatro tipos de líneas

LineShapeType expone cuatro formas, y la diferencia entre ellas es geométrica: cómo recorre la línea desde su inicio hasta su final:

Las cuatro se crean con el mismo método —sheet.Lines.AddLine()—, y el parámetro lineShapeType selecciona cuál se dibuja. Las propiedades de apariencia (DashStyle, Color, Weight) se aplican a las cuatro por igual.

Insertar líneas en una hoja de cálculo

El ejemplo inserta una de cada tipo de línea en una hoja de cálculo nueva, cada una con un estilo de guion y un color distintos para que las cuatro formas se distingan en el resultado. Los pasos son:

1. Cree un objeto Workbook y obtenga la primera hoja de cálculo.
2. Llame a Worksheet.Lines.AddLine() cuatro veces, pasando parámetros de posición y un LineShapeType diferente cada vez.
3. Personalice el DashStyle, Color y Weight de cada línea.
4. Guarde el libro con Workbook.SaveToFile().

function App() {
  const addLineShapes = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a straight line - solid, CadetBlue, weight 2, with arrow
    let line1 = sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });
    line1.DashStyle = xlsModule.ShapeDashLineStyleType.Solid;
    line1.Color = xlsModule.Color.get_CadetBlue();
    line1.Weight = 2;
    line1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a curved line - dotted, OrangeRed, weight 2
    let line2 = sheet.Lines.AddLine({ row: 12, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.CurveLine });
    line2.DashStyle = xlsModule.ShapeDashLineStyleType.Dotted;
    line2.Color = xlsModule.Color.get_OrangeRed();
    line2.Weight = 2;

    // Add an elbow connector - DashDotDot, Purple, weight 2
    let line3 = sheet.Lines.AddLine({ row: 14, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.ElbowLine });
    line3.DashStyle = xlsModule.ShapeDashLineStyleType.DashDotDot;
    line3.Color = xlsModule.Color.get_Purple();
    line3.Weight = 2;

    // Add an inverted line - Dashed, Green, weight 2
    let line4 = sheet.Lines.AddLine({ row: 16, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.LineInv });
    line4.DashStyle = xlsModule.ShapeDashLineStyleType.Dashed;
    line4.Color = xlsModule.Color.get_Green();
    line4.Weight = 2;

    // Save the workbook
    const outputFileName = 'AddLineShapes.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Line Shapes</h1>
      <button onClick={addLineShapes}>Start</button>
    </div>
  );
}

export default App;

Cuatro tipos de líneas insertadas en una hoja de cálculo: recta, curva, de codo e invertida

La primera línea también establece EndArrowHeadStyle, lo que le da una punta de flecha al final; Lines.AddLine() admite un solo estilo de flecha al final, pero no al principio. Para flechas en ambos extremos o un posicionamiento con precisión de píxeles, use TypedLines.AddLine() en su lugar, tratado en Añadir conectores de flecha en Excel en JavaScript (React).

Personalizar la apariencia de las líneas

Tres propiedades controlan el aspecto de una línea, y son independientes: cambiar una no restablece las otras:

El estilo de guion es el que vale la pena experimentar. Una línea continua se interpreta como una conexión permanente; una línea punteada se interpreta como una conexión tentativa u opcional; una línea discontinua se interpreta como un límite. En un diagrama de flujo donde algunas conexiones son condicionales, usar Solid para el flujo principal y Dashed para las ramas condicionales comunica la distinción sin necesidad de una leyenda.

Posicionamiento por fila y columna

Lines.AddLine() coloca una línea usando coordenadas de fila y columna, además de un ancho y un alto:

sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });

• row y column establecen el punto de anclaje: donde comienza la línea.
• width establece la extensión horizontal en píxeles.
• height establece la extensión vertical en píxeles. Un alto de 1 produce una línea horizontal; un ancho de 1 produce una vertical.

Se trata de un sistema híbrido: el anclaje está en unidades de hoja de cálculo (filas y columnas), pero el tamaño está en píxeles. Eso hace que sea sencillo alinear una línea con una celda específica —pase la fila y la columna de esa celda—, pero la longitud debe tener en cuenta los anchos de columna y las alturas de fila, que varían. Si necesita un control total en píxeles sobre la posición inicial además del tamaño, TypedLines.AddLine() ofrece Top y Left en píxeles.

Problemas comunes

La línea no es visible en el resultado. Compruebe Weight y Color. Un grosor de 0 o un color que coincida con el fondo producen una línea invisible. Verifique también que row y column sitúen la línea dentro del rango usado de la hoja de cálculo: una línea anclada en la fila 1000 en una hoja vacía se dibuja, pero fuera de la pantalla.

Falta la punta de flecha. No se estableció EndArrowHeadStyle, o se estableció en LineNoArrow. Asigne ShapeArrowStyleType.LineArrow para mostrar una punta de flecha al final de la línea. Lines.AddLine() no admite BeginArrowHeadStyle; para flechas en ambos extremos, use TypedLines.AddLine().

La línea de codo va en una dirección inesperada. Un conector de codo se dobla una vez, y la dirección del doblez depende de los valores de width y height. Un ancho positivo con un alto positivo se dobla hacia abajo y a la derecha; cambiar el signo de cualquiera de los dos valores cambia la dirección del doblez. Experimente primero con valores pequeños para confirmar la forma antes de comprometerse con un diseño grande.

Las líneas se superponen o se apilan unas sobre otras. Cada llamada a AddLine crea una forma independiente en la posición especificada. Si dos líneas comparten la misma row y column, se superponen. Desplace el valor de row en 2 o más para cada línea sucesiva, como hace el ejemplo.

Preguntas frecuentes

¿Cuál es la diferencia entre Lines.AddLine() y TypedLines.AddLine()?

Lines.AddLine() posiciona por fila y columna y solo admite una punta de flecha al final. TypedLines.AddLine() posiciona por coordenadas de píxeles y admite puntas de flecha en ambos extremos. Para formas de línea básicas sin flechas direccionales, Lines.AddLine() es más sencillo. Para conectores que necesitan una ubicación precisa o flechas bidireccionales, consulte Añadir conectores de flecha en Excel en JavaScript (React).

¿Puedo crear una línea vertical?

Sí. Establezca width en 1 y height en un valor positivo. La línea se extiende hacia abajo desde el punto de anclaje.

¿Cuántas líneas puede contener una sola hoja de cálculo?

No hay un límite estricto en la API. Cada línea es un objeto de forma almacenado en la colección de formas de la hoja de cálculo, y la limitación práctica es el tamaño del archivo y el rendimiento de representación cuando hay cientos de formas.

¿Las líneas se conservan si el archivo se abre en Excel?

Sí. Las líneas se almacenan como objetos de forma estándar en el XML de la hoja de cálculo. Excel las lee y las representa de forma nativa: no son un artefacto de representación específico de Spire.XLS.

¿Puedo recuperar y modificar líneas que ya existen en un libro?

Sí. Recorra la colección sheet.Shapes para acceder a los objetos de forma de línea y, a continuación, modifique sus propiedades a través de la interfaz ILineShape. Para eliminarlas, use sheet.Shapes.Remove(index).

Véase también

• Añadir conectores de flecha en Excel en JavaScript (React)
• Integrar Spire.XLS for JavaScript en un proyecto de React
• Página del producto Spire.XLS for JavaScript

Ein Arbeitsblatt ist nicht immer nur ein Raster aus Zahlen. Manchmal ist es eine Leinwand – ein zwischen Datenblöcken skizziertes Flussdiagramm, ein Beziehungsdiagramm, das Teams mit Projekten verbindet, ein Callout, der von einer Notiz auf die Zelle zeigt, die er kommentiert. In all diesen Fällen ist das fehlende Element eine Linie: ein gerader Strich zwischen zwei Kästen, ein geschwungener Bogen um einen Bereich, ein Ellbogen-Verbinder, der einmal abknickt und weiterläuft.

Spire.XLS for JavaScript bietet einer React-App die Methode sheet.Lines.AddLine() zum Einfügen von Linienformen an einer bestimmten Position, mit vier Linientypen, die über die Enumeration LineShapeType verfügbar sind, und voller Kontrolle über Strichstil, Farbe und Stärke. Alles läuft im Browser auf WebAssembly – kein Backend, keine Excel-Automatisierung, kein Datei-Upload.

Zur Projekteinrichtung siehe Integrating Spire.XLS for JavaScript in a React Project. Die folgenden Beispiele setzen voraus, dass das Paket installiert und das WebAssembly-Modul initialisiert wurde.

Wann ein Arbeitsblatt Linien benötigt

Linien in einem Arbeitsblatt dienen drei übergeordneten Zwecken, und der Linientyp, zu dem Sie greifen, hängt davon ab, welcher davon gerade vor Ihnen liegt:

Der Fall mit der Pfeilspitze – bei dem die Linie eine Richtung anzeigen muss – verwendet eine andere API, TypedLines.AddLine(), die Pfeilstile an beiden Enden und pixelgenaue Positionierung unterstützt. Dies wird separat behandelt in Add Arrow Connectors in Excel in JavaScript (React). Dieser Artikel konzentriert sich auf Lines.AddLine(), das die vier grundlegenden Linienformen und ihre visuelle Gestaltung abdeckt.

Voraussetzungen

Sie benötigen ein React-Projekt mit installiertem Spire.XLS for JavaScript und initialisiertem WebAssembly-Modul, erreichbar unter window.wasmModule.spirexls. Das Beispiel lädt eine Schriftart in das VFS zur Textmessung und speichert mit dem Excel-2010-Versionsflag.

Die vier Linientypen

LineShapeType stellt vier Formen bereit, und der Unterschied zwischen ihnen ist geometrisch – wie die Linie von ihrem Anfang zu ihrem Ende verläuft:

Alle vier werden durch dieselbe Methode erstellt – sheet.Lines.AddLine() –, wobei der Parameter lineShapeType auswählt, welche gezeichnet wird. Die Erscheinungseigenschaften (DashStyle, Color, Weight) gelten für alle vier gleichermaßen.

Linien in ein Arbeitsblatt einfügen

Das Beispiel fügt je einen Vertreter jedes Linientyps in ein neues Arbeitsblatt ein, jeder mit einem eigenen Strichstil und einer eigenen Farbe, damit die vier Formen in der Ausgabe unterscheidbar sind. Die Schritte sind:

1. Ein Workbook-Objekt erstellen und das erste Arbeitsblatt abrufen.
2. Worksheet.Lines.AddLine() viermal aufrufen und dabei jeweils Positionsparameter und einen anderen LineShapeType übergeben.
3. DashStyle, Color und Weight jeder Linie anpassen.
4. Die Arbeitsmappe mit Workbook.SaveToFile() speichern.

function App() {
  const addLineShapes = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a straight line - solid, CadetBlue, weight 2, with arrow
    let line1 = sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });
    line1.DashStyle = xlsModule.ShapeDashLineStyleType.Solid;
    line1.Color = xlsModule.Color.get_CadetBlue();
    line1.Weight = 2;
    line1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a curved line - dotted, OrangeRed, weight 2
    let line2 = sheet.Lines.AddLine({ row: 12, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.CurveLine });
    line2.DashStyle = xlsModule.ShapeDashLineStyleType.Dotted;
    line2.Color = xlsModule.Color.get_OrangeRed();
    line2.Weight = 2;

    // Add an elbow connector - DashDotDot, Purple, weight 2
    let line3 = sheet.Lines.AddLine({ row: 14, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.ElbowLine });
    line3.DashStyle = xlsModule.ShapeDashLineStyleType.DashDotDot;
    line3.Color = xlsModule.Color.get_Purple();
    line3.Weight = 2;

    // Add an inverted line - Dashed, Green, weight 2
    let line4 = sheet.Lines.AddLine({ row: 16, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.LineInv });
    line4.DashStyle = xlsModule.ShapeDashLineStyleType.Dashed;
    line4.Color = xlsModule.Color.get_Green();
    line4.Weight = 2;

    // Save the workbook
    const outputFileName = 'AddLineShapes.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Line Shapes</h1>
      <button onClick={addLineShapes}>Start</button>
    </div>
  );
}

export default App;

Vier Linientypen, die in ein Arbeitsblatt eingefügt wurden: gerade, geschwungen, Ellbogen und umgekehrt

Die erste Linie legt außerdem EndArrowHeadStyle fest, wodurch sie am Ende eine Pfeilspitze erhält – Lines.AddLine() unterstützt einen einzelnen Pfeilstil am Ende, aber nicht am Anfang. Für Pfeile an beiden Enden oder pixelgenaue Positionierung verwenden Sie stattdessen TypedLines.AddLine(), behandelt in Add Arrow Connectors in Excel in JavaScript (React).

Das Erscheinungsbild von Linien anpassen

Drei Eigenschaften steuern, wie eine Linie aussieht, und sie sind unabhängig voneinander – das Ändern einer setzt die anderen nicht zurück:

Der Strichstil ist derjenige, mit dem es sich zu experimentieren lohnt. Eine durchgezogene Linie wirkt wie eine dauerhafte Verbindung; eine gepunktete Linie wirkt wie eine vorläufige oder optionale; eine gestrichelte Linie wirkt wie eine Grenze. In einem Flussdiagramm, in dem einige Verbindungen bedingt sind, vermittelt die Verwendung von Solid für den Hauptfluss und Dashed für die bedingten Verzweigungen den Unterschied ohne Legende.

Positionierung nach Zeile und Spalte

Lines.AddLine() platziert eine Linie anhand von Zeilen- und Spaltenkoordinaten sowie einer Breite und Höhe:

sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });

• row und column legen den Ankerpunkt fest – wo die Linie beginnt.
• width legt die horizontale Ausdehnung in Pixeln fest.
• height legt die vertikale Ausdehnung in Pixeln fest. Eine Höhe von 1 erzeugt eine horizontale Linie; eine Breite von 1 erzeugt eine vertikale.

Dies ist ein hybrides System: Der Anker wird in Tabellenkalkulationseinheiten (Zeilen und Spalten) angegeben, die Größe jedoch in Pixeln. Das macht es einfach, eine Linie an einer bestimmten Zelle auszurichten – übergeben Sie einfach deren Zeile und Spalte –, aber die Länge muss Spaltenbreiten und Zeilenhöhen berücksichtigen, die variieren. Wenn Sie volle pixelgenaue Kontrolle sowohl über die Startposition als auch über die Größe benötigen, bietet TypedLines.AddLine() Top und Left in Pixeln.

Häufige Probleme

Die Linie ist in der Ausgabe nicht sichtbar. Prüfen Sie Weight und Color. Eine Stärke von 0 oder eine Farbe, die dem Hintergrund entspricht, erzeugt eine unsichtbare Linie. Vergewissern Sie sich außerdem, dass row und column die Linie innerhalb des verwendeten Bereichs des Arbeitsblatts platzieren – eine in Zeile 1000 auf einem leeren Blatt verankerte Linie wird gezeichnet, liegt aber außerhalb des sichtbaren Bereichs.

Die Pfeilspitze fehlt. EndArrowHeadStyle wurde nicht festgelegt oder auf LineNoArrow gesetzt. Weisen Sie ShapeArrowStyleType.LineArrow zu, um am Ende der Linie eine Pfeilspitze anzuzeigen. Lines.AddLine() unterstützt BeginArrowHeadStyle nicht – für Pfeile an beiden Enden verwenden Sie TypedLines.AddLine().

Die Ellbogen-Linie verläuft in eine unerwartete Richtung. Ein Ellbogen-Verbinder knickt einmal ab, und die Richtung der Biegung hängt von den Werten für width und height ab. Eine positive Breite mit einer positiven Höhe knickt nach rechts unten ab; ändert man das Vorzeichen eines der beiden Werte, ändert sich die Biegerichtung. Experimentieren Sie zunächst mit kleinen Werten, um die Form zu bestätigen, bevor Sie sich auf ein großes Layout festlegen.

Linien überlappen oder stapeln sich übereinander. Jeder Aufruf von AddLine erzeugt eine unabhängige Form an der angegebenen Position. Wenn zwei Linien dieselbe row und column teilen, überlappen sie sich. Versetzen Sie den row-Wert für jede nachfolgende Linie um 2 oder mehr, wie es das Beispiel tut.

FAQ

Was ist der Unterschied zwischen Lines.AddLine() und TypedLines.AddLine()?

Lines.AddLine() positioniert nach Zeile und Spalte und unterstützt eine Pfeilspitze nur am Ende. TypedLines.AddLine() positioniert nach Pixelkoordinaten und unterstützt Pfeilspitzen an beiden Enden. Für einfache Linienformen ohne Richtungspfeile ist Lines.AddLine() einfacher. Für Verbinder, die eine präzise Platzierung oder bidirektionale Pfeile benötigen, siehe Add Arrow Connectors in Excel in JavaScript (React).

Kann ich eine vertikale Linie erstellen?

Ja. Setzen Sie width auf 1 und height auf einen positiven Wert. Die Linie erstreckt sich vom Ankerpunkt nach unten.

Wie viele Linien kann ein einzelnes Arbeitsblatt enthalten?

In der API gibt es keine feste Grenze. Jede Linie ist ein Formobjekt, das in der Formensammlung des Arbeitsblatts gespeichert ist, und die praktische Einschränkung sind Dateigröße und Rendering-Leistung, wenn Hunderte von Formen vorhanden sind.

Bleiben die Linien erhalten, wenn die Datei in Excel geöffnet wird?

Ja. Linien werden als Standard-Formobjekte im XML des Arbeitsblatts gespeichert. Excel liest und rendert sie nativ – sie sind kein Rendering-Artefakt, das spezifisch für Spire.XLS ist.

Kann ich Linien abrufen und ändern, die bereits in einer Arbeitsmappe vorhanden sind?

Ja. Durchlaufen Sie die Sammlung sheet.Shapes, um auf Linienformobjekte zuzugreifen, und ändern Sie anschließend deren Eigenschaften über die Schnittstelle ILineShape. Zum Löschen verwenden Sie sheet.Shapes.Remove(index).

Siehe auch

• Add Arrow Connectors in Excel in JavaScript (React)
• Integrating Spire.XLS for JavaScript in a React Project
• Spire.XLS for JavaScript Product Page

Лист — это не всегда просто сетка чисел. Иногда это холст — блок-схема, набросанная между блоками данных, диаграмма связей, соединяющая команды с проектами, выноска, указывающая от примечания к ячейке, которую оно поясняет. Во всех этих случаях недостающий элемент — это линия: прямая черта между двумя блоками, изогнутая дуга вокруг области, угловой соединитель, который один раз изгибается и продолжается.

Spire.XLS for JavaScript предоставляет React-приложению метод sheet.Lines.AddLine() для вставки фигур-линий в заданной позиции, с четырьмя типами линий, доступными через перечисление LineShapeType, и полным контролем над стилем штриха, цветом и толщиной. Всё работает в браузере на WebAssembly — без серверной части, без автоматизации Excel, без загрузки файлов.

По настройке проекта см. Интеграция Spire.XLS for JavaScript в проект React. Приведённые ниже примеры предполагают, что пакет установлен, а модуль WebAssembly инициализирован.

Когда на листе нужны линии

Линии на листе служат трём основным целям, и выбор типа линии зависит от того, с какой из них вы имеете дело:

Случай со стрелкой — когда линия должна показывать направление — использует другой API, TypedLines.AddLine(), который поддерживает стили стрелок на обоих концах и позиционирование с точностью до пикселя. Это рассматривается отдельно в статье Добавление соединителей со стрелками в Excel на JavaScript (React). Данная статья посвящена Lines.AddLine(), который работает с четырьмя основными формами линий и их визуальным оформлением.

Предварительные требования

Вам нужен проект React с установленным Spire.XLS for JavaScript и инициализированным модулем WebAssembly, доступным по адресу window.wasmModule.spirexls. Пример загружает шрифт в VFS для измерения текста и сохраняет файл с флагом версии Excel 2010.

Четыре типа линий

LineShapeType предоставляет четыре фигуры, и разница между ними геометрическая — как линия проходит от начала до конца:

Все четыре создаются одним и тем же методом — sheet.Lines.AddLine() — при этом параметр lineShapeType определяет, какая именно будет нарисована. Свойства внешнего вида (DashStyle, Color, Weight) применяются ко всем четырём одинаково.

Вставка линий на лист

В примере на новый лист вставляется по одной линии каждого типа, каждая с отдельным стилем штриха и цветом, чтобы четыре фигуры различались в выводе. Шаги следующие:

1. Создайте объект Workbook и получите первый лист.
2. Вызовите Worksheet.Lines.AddLine() четыре раза, передавая параметры позиции и каждый раз другой LineShapeType.
3. Настройте DashStyle, Color и Weight для каждой линии.
4. Сохраните книгу с помощью Workbook.SaveToFile().

function App() {
  const addLineShapes = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a straight line - solid, CadetBlue, weight 2, with arrow
    let line1 = sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });
    line1.DashStyle = xlsModule.ShapeDashLineStyleType.Solid;
    line1.Color = xlsModule.Color.get_CadetBlue();
    line1.Weight = 2;
    line1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a curved line - dotted, OrangeRed, weight 2
    let line2 = sheet.Lines.AddLine({ row: 12, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.CurveLine });
    line2.DashStyle = xlsModule.ShapeDashLineStyleType.Dotted;
    line2.Color = xlsModule.Color.get_OrangeRed();
    line2.Weight = 2;

    // Add an elbow connector - DashDotDot, Purple, weight 2
    let line3 = sheet.Lines.AddLine({ row: 14, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.ElbowLine });
    line3.DashStyle = xlsModule.ShapeDashLineStyleType.DashDotDot;
    line3.Color = xlsModule.Color.get_Purple();
    line3.Weight = 2;

    // Add an inverted line - Dashed, Green, weight 2
    let line4 = sheet.Lines.AddLine({ row: 16, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.LineInv });
    line4.DashStyle = xlsModule.ShapeDashLineStyleType.Dashed;
    line4.Color = xlsModule.Color.get_Green();
    line4.Weight = 2;

    // Save the workbook
    const outputFileName = 'AddLineShapes.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Line Shapes</h1>
      <button onClick={addLineShapes}>Start</button>
    </div>
  );
}

export default App;

Четыре типа линий, вставленных на лист: прямая, изогнутая, угловая и инвертированная

Первая линия также задаёт EndArrowHeadStyle, что добавляет ей стрелку на конце — Lines.AddLine() поддерживает один стиль стрелки на конце, но не в начале. Для стрелок на обоих концах или позиционирования с точностью до пикселя используйте вместо этого TypedLines.AddLine(), что рассматривается в статье Добавление соединителей со стрелками в Excel на JavaScript (React).

Настройка внешнего вида линий

Внешний вид линии определяют три свойства, и они независимы — изменение одного не сбрасывает остальные:

Стиль штриха — то, с чем стоит экспериментировать. Сплошная линия воспринимается как постоянная связь; пунктирная линия — как предварительная или необязательная; штриховая линия — как граница. В блок-схеме, где некоторые связи условны, использование Solid для основного потока и Dashed для условных ветвей передаёт это различие без легенды.

Позиционирование по строке и столбцу

Lines.AddLine() размещает линию, используя координаты строки и столбца, а также ширину и высоту:

sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });

• row и column задают точку привязки — место начала линии.
• width задаёт горизонтальную протяжённость в пикселях.
• height задаёт вертикальную протяжённость в пикселях. Высота 1 даёт горизонтальную линию; ширина 1 даёт вертикальную.

Это гибридная система: привязка задаётся в единицах таблицы (строки и столбцы), а размер — в пикселях. Это упрощает выравнивание линии по конкретной ячейке — передайте строку и столбец этой ячейки — но при определении длины нужно учитывать ширину столбцов и высоту строк, которые различаются. Если вам нужен полный пиксельный контроль как над начальной позицией, так и над размером, TypedLines.AddLine() предлагает Top и Left в пикселях.

Типичные проблемы

Линия не видна в выводе. Проверьте Weight и Color. Толщина 0 или цвет, совпадающий с фоном, делают линию невидимой. Также убедитесь, что row и column размещают линию в пределах используемого диапазона листа — линия, привязанная к строке 1000 на пустом листе, рисуется, но оказывается за пределами экрана.

Отсутствует стрелка. Свойство EndArrowHeadStyle не задано или установлено в LineNoArrow. Присвойте ShapeArrowStyleType.LineArrow, чтобы показать стрелку на конце линии. Lines.AddLine() не поддерживает BeginArrowHeadStyle — для стрелок на обоих концах используйте TypedLines.AddLine().

Угловая линия идёт в неожиданном направлении. Угловой соединитель изгибается один раз, и направление изгиба зависит от значений width и height. Положительная ширина с положительной высотой даёт изгиб вниз-вправо; изменение знака любого из значений меняет направление изгиба. Сначала поэкспериментируйте с небольшими значениями, чтобы убедиться в форме, прежде чем переходить к большому макету.

Линии перекрываются или накладываются друг на друга. Каждый вызов AddLine создаёт независимую фигуру в указанной позиции. Если две линии имеют одинаковые row и column, они перекрываются. Смещайте значение row на 2 или более для каждой последующей линии, как это сделано в примере.

Часто задаваемые вопросы

В чём разница между Lines.AddLine() и TypedLines.AddLine()?

Lines.AddLine() позиционирует по строке и столбцу и поддерживает стрелку только на конце. TypedLines.AddLine() позиционирует по пиксельным координатам и поддерживает стрелки на обоих концах. Для базовых форм линий без направляющих стрелок Lines.AddLine() проще. Для соединителей, которым нужно точное размещение или двунаправленные стрелки, см. Добавление соединителей со стрелками в Excel на JavaScript (React).

Можно ли создать вертикальную линию?

Да. Задайте width равным 1, а height — положительным значением. Линия простирается вниз от точки привязки.

Сколько линий может содержать один лист?

В API нет жёсткого ограничения. Каждая линия — это объект-фигура, хранящийся в коллекции фигур листа, а практическое ограничение — размер файла и производительность отрисовки при наличии сотен фигур.

Сохранятся ли линии, если файл открыть в Excel?

Да. Линии хранятся как стандартные объекты-фигуры в XML листа. Excel читает и отображает их нативно — это не артефакт отрисовки, специфичный для Spire.XLS.

Можно ли получить и изменить линии, уже существующие в книге?

Да. Пройдите по коллекции sheet.Shapes, чтобы получить доступ к объектам-фигурам линий, затем измените их свойства через интерфейс ILineShape. Для удаления используйте sheet.Shapes.Remove(index).

См. также

• Добавление соединителей со стрелками в Excel на JavaScript (React)
• Интеграция Spire.XLS for JavaScript в проект React
• Страница продукта Spire.XLS for JavaScript

Uma linha entre duas caixas em um fluxograma diz "estas estão relacionadas". Uma seta de uma para a outra diz "esta vem primeiro". Essa distinção — direção — é o que separa um conector de uma decoração, e é justamente o que a API básica Lines.AddLine() não consegue fazer nas duas extremidades. Um fluxo de processo precisa de uma seta saindo de cada etapa; um diagrama de causa e efeito precisa de setas apontando para dentro; uma comparação às vezes precisa de setas de ponta dupla para mostrar um vínculo bidirecional. Nenhum desses casos é possível com um único EndArrowHeadStyle.

O Spire.XLS for JavaScript fornece sheet.TypedLines.AddLine() exatamente para esse caso. Ele posiciona linhas por coordenadas em pixels em vez de linha e coluna, e aceita BeginArrowHeadStyle e EndArrowHeadStyle de forma independente — então uma linha pode ter uma seta em uma extremidade, em ambas ou em nenhuma. O mecanismo é executado no navegador em WebAssembly, com arquivos trafegando por um sistema de arquivos virtual (VFS) e sem envolvimento de backend.

Para a configuração do projeto, consulte Integrando o Spire.XLS for JavaScript em um Projeto React. Os exemplos abaixo pressupõem que o pacote está instalado e que o módulo WebAssembly foi inicializado.

A direção muda tudo

Três diagramas, três requisitos direcionais diferentes, e a mesma API de linha dá conta de todos eles:

O estilo da ponta da seta também carrega significado. Uma seta preenchida sólida (LineArrow) é lida como uma conexão definida e comprometida. Uma seta aberta (LineArrowOpen) é lida como uma conexão mais solta e menos certa — comum em diagramas de fluxo de dados, em que a direção é conhecida, mas o mecanismo não é especificado.

Pré-requisitos

Você precisa de um projeto React com o Spire.XLS for JavaScript instalado e o módulo WebAssembly inicializado, acessível em window.wasmModule.spirexls. O exemplo carrega uma fonte no VFS e salva com o sinalizador de versão do Excel 2010.

TypedLines vs Lines: qual é a diferença

sheet.Lines.AddLine() e sheet.TypedLines.AddLine() são duas APIs separadas para duas necessidades separadas. As diferenças são estruturais, não cosméticas:

O suporte a seta no início é a diferença mais significativa. Com Lines.AddLine(), uma linha pode ter uma ponta de seta na extremidade final, mas não no início — o que é suficiente para um fluxo unidirecional, mas não para um vínculo bidirecional. TypedLines.AddLine() elimina essa restrição.

Para formas de linha básicas sem setas, Inserir Formas de Linha no Excel em JavaScript (React) aborda a API Lines.AddLine().

Posicionamento preciso em pixels

TypedLines.AddLine() posiciona linhas usando Top e Left em pixels, com Width e Height controlando a extensão:

let line = sheet.TypedLines.AddLine();
line.Top = 10;     // 10 pixels from the top of the sheet
line.Left = 20;    // 20 pixels from the left
line.Width = 100;  // 100 pixels wide
line.Height = 0;   // 0 height — a horizontal line

Um Height de 0 produz uma linha horizontal; um Width de 0 produz uma linha vertical. Definir ambos com valores diferentes de zero produz uma diagonal ou um conector dobrado, dependendo do LineShapeType.

A mudança de coordenadas de linha e coluna para coordenadas em pixels é mais importante quando as linhas precisam conectar pontos específicos dentro das células — o meio de um intervalo mesclado, a borda de uma borda — em vez de se alinharem aos limites das células. O posicionamento em pixels permite calcular o início e o fim exatos a partir do layout que você conhece, em vez de estimar qual linha e coluna chega mais perto.

Combinações de setas

Com BeginArrowHeadStyle e EndArrowHeadStyle definidos de forma independente, quatro combinações cobrem os casos comuns:

O estilo da seta também pode ser LineArrowOpen — um formato de V aberto em vez de um triângulo preenchido — em qualquer uma das extremidades. Misturar estilos nas duas extremidades é válido: uma seta preenchida em uma extremidade e uma seta aberta na outra comunicam que uma direção é definida e a outra é incerta.

Inserir linhas com setas

O exemplo insere seis linhas com setas em uma nova planilha, cobrindo as combinações comuns: uma linha de seta dupla, uma linha de seta simples, um conector de seta em cotovelo, um conector de seta dupla em cotovelo, um conector de seta curvo e um conector de seta dupla curvo. As etapas são:

1. Crie um objeto Workbook e obtenha a primeira planilha.
2. Chame Worksheet.TypedLines.AddLine() para criar cada linha.
3. Defina a posição da linha por meio de Top, Left, Width e Height (em pixels).
4. Defina os estilos de seta nas duas extremidades por meio de BeginArrowHeadStyle e EndArrowHeadStyle.
5. Especifique o tipo de linha por meio de LineShapeType (reta, cotovelo, curva, etc.).
6. Salve a pasta de trabalho com Workbook.SaveToFile().

function App() {
  const addArrowLines = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a double-arrow line - solid blue
    let line = sheet.TypedLines.AddLine();
    line.Top = 10;
    line.Left = 20;
    line.Width = 100;
    line.Height = 0;
    line.Color = xlsModule.Color.get_Blue();
    line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a single-arrow line - solid red
    let line_1 = sheet.TypedLines.AddLine();
    line_1.Top = 50;
    line_1.Left = 30;
    line_1.Width = 100;
    line_1.Height = 100;
    line_1.Color = xlsModule.Color.get_Red();
    line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
    line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add an elbow arrow connector
    let line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line3.Top = 100;
    line3.Left = 50;

    // Add an elbow double-arrow connector
    let line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line2.Width = 50;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.Left = 120;
    line2.Top = 100;

    // Add a curved arrow connector
    line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line3.Top = 100;
    line3.Left = 200;

    // Add a curved double-arrow connector
    line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line2.Width = 30;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.Left = 250;
    line2.Top = 100;

    // Save the workbook
    const outputFileName = 'AddArrowLines.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Arrow Lines</h1>
      <button onClick={addArrowLines}>Start</button>
    </div>
  );
}

export default App;

Seis linhas com setas: seta dupla, seta simples, seta em cotovelo, seta dupla em cotovelo, seta curva e seta dupla curva

Observe a reutilização das variáveis line3 e line2 na segunda metade da função. Cada chamada a TypedLines.AddLine() retorna um novo objeto de linha que já foi adicionado à planilha — a variável é um identificador para definir propriedades, não um contêiner que precisa ser preservado. Reutilizar o nome da variável para a próxima linha é seguro porque a linha anterior já está comprometida na coleção de formas da planilha.

Gerenciar linhas existentes

Uma planilha que já contém linhas — sejam adicionadas pelo seu código, importadas de um arquivo ou desenhadas por um usuário — as expõe por meio da coleção sheet.Shapes. Cada forma pode ser recuperada por índice e modificada por meio de suas propriedades:

// Get the first shape in the worksheet
let shape = sheet.Shapes.get(0);
// Modify its properties — color, dash style, etc.
shape.Color = xlsModule.Color.get_Red();

Para exclusão, sheet.Shapes.Remove(index) remove a forma no índice especificado. Para remover linhas seletivamente — por nome, por tipo ou por posição — itere a coleção e remova as formas correspondentes. Remova do último índice para baixo ao excluir em um loop, pois remover um elemento desloca os índices de todos os elementos após ele.

Problemas comuns

A ponta da seta não aparece. BeginArrowHeadStyle ou EndArrowHeadStyle não foi definido, ou foi definido como LineNoArrow. Verifique em qual extremidade você espera a seta e atribua a propriedade correspondente. Uma linha sem nenhuma das duas propriedades definidas não tem setas em nenhuma extremidade.

A linha aparece na posição errada. Top e Left estão em pixels, não em linhas e colunas. Um valor de Top = 10 coloca a linha a 10 pixels do topo da planilha, não na linha 10. Se você está acostumado com a API Lines.AddLine(), esta é a fonte mais comum de posicionamento incorreto.

O conector em cotovelo dobra na direção errada. A direção da dobra depende dos sinais e das magnitudes relativas de Width e Height. Um Width positivo com um Height positivo dobra para baixo e para a direita. Inverta o sinal ou troque os dois valores para mudar a dobra. Teste com valores pequenos primeiro.

A linha curva não curva como eu esperava. Uma CurveLine por meio de TypedLines desenha um arco suave entre os pontos inicial e final, e a forma do arco é influenciada por Width e Height. Ao contrário de um conector em cotovelo, que tem uma única dobra em ângulo reto, uma curva é contínua — mas seu caminho exato depende das dimensões, então verifique a saída antes de confiar nela para um layout preciso.

Perguntas frequentes

Qual é a diferença entre LineArrow e LineArrowOpen?

LineArrow desenha uma ponta de seta triangular preenchida. LineArrowOpen desenha uma ponta de seta aberta em forma de V — dois traços sem preenchimento. O estilo aberto é comum em diagramas de fluxo de dados e de entidade-relacionamento, em que a seta indica direção sem implicar um mecanismo específico.

Posso definir estilos de seta diferentes nas duas extremidades?

Sim. BeginArrowHeadStyle e EndArrowHeadStyle são propriedades independentes. Uma linha com LineArrow em uma extremidade e LineArrowOpen na outra é válida e comunica que uma direção é definida enquanto a outra é incerta.

Como as coordenadas em pixels se relacionam com o layout da planilha?

As coordenadas em pixels são medidas a partir do canto superior esquerdo da planilha. As alturas das linhas e as larguras das colunas no Excel são medidas em pontos e caracteres, respectivamente, portanto converter entre posições de células e coordenadas em pixels exige considerar as alturas de linha e larguras de coluna atuais. Para linhas que precisam se alinhar aos limites das células, Lines.AddLine() com parâmetros de linha e coluna pode ser mais simples.

Posso misturar Lines.AddLine() e TypedLines.AddLine() na mesma planilha?

Sim. As duas APIs adicionam formas à mesma coleção de formas da planilha. Uma planilha pode conter formas de linha básicas e linhas com setas simultaneamente.

Isso exige que o Excel esteja instalado?

Não. O mecanismo é executado como WebAssembly no navegador. As linhas e setas são gravadas como objetos de forma padrão no XML da planilha, e o Excel as renderiza nativamente quando o arquivo é aberto.

Veja também

• Inserir Formas de Linha no Excel em JavaScript (React)
• Integrando o Spire.XLS for JavaScript em um Projeto React
• Página do produto Spire.XLS for JavaScript

순서도에서 두 상자 사이의 선은 "이 둘은 관련이 있다"는 의미입니다. 한쪽에서 다른 쪽으로 향하는 화살표는 "이쪽이 먼저다"라는 의미입니다. 바로 이 구분 — 방향 — 이 연결선과 장식을 나누는 기준이며, 기본 Lines.AddLine() API가 양쪽 끝에서 할 수 없는 유일한 것입니다. 프로세스 흐름은 각 단계에서 나가는 화살표가 필요하고, 인과 관계도는 화살표가 안쪽을 향해야 하며, 비교할 때는 양방향 연결을 나타내기 위해 양쪽 화살표가 필요한 경우도 있습니다. 이러한 것들은 단일 EndArrowHeadStyle로는 불가능합니다.

Spire.XLS for JavaScript는 바로 이러한 경우를 위해 sheet.TypedLines.AddLine()을 제공합니다. 이 메서드는 행과 열 대신 픽셀 좌표로 선의 위치를 지정하며, BeginArrowHeadStyle과 EndArrowHeadStyle을 각각 독립적으로 받아들이므로 한쪽 끝에만, 양쪽 끝에, 또는 어느 쪽에도 화살표가 없는 선을 만들 수 있습니다. 이 엔진은 브라우저에서 WebAssembly로 실행되며, 파일은 가상 파일 시스템(VFS)을 통해 이동하고 백엔드는 관여하지 않습니다.

프로젝트 설정에 대해서는 React 프로젝트에 Spire.XLS for JavaScript 통합하기를 참조하세요. 아래 예제는 패키지가 설치되어 있고 WebAssembly 모듈이 초기화되었다고 가정합니다.

방향이 모든 것을 바꿉니다

세 가지 다이어그램, 세 가지 서로 다른 방향 요구 사항이 있으며, 동일한 라인 API가 이 모두를 처리합니다:

화살촉 스타일 자체도 의미를 담고 있습니다. 채워진 화살표(LineArrow)는 확실하고 확정된 연결로 읽힙니다. 열린 화살표(LineArrowOpen)는 더 느슨하고 덜 확실한 연결로 읽히며, 방향은 알지만 메커니즘은 명시되지 않은 데이터 흐름도에서 흔히 사용됩니다.

사전 요구 사항

Spire.XLS for JavaScript가 설치되고 WebAssembly 모듈이 초기화된 React 프로젝트가 필요하며, window.wasmModule.spirexls에서 접근할 수 있어야 합니다. 예제에서는 VFS에 글꼴을 로드하고 Excel 2010 버전 플래그로 저장합니다.

TypedLines와 Lines: 무엇이 다른가

sheet.Lines.AddLine()과 sheet.TypedLines.AddLine()은 서로 다른 필요를 위한 두 개의 별도 API입니다. 차이는 겉모습이 아니라 구조적인 것입니다:

시작점 화살표 지원이 가장 중요한 차이입니다. Lines.AddLine()에서는 선의 끝에는 화살촉을 둘 수 있지만 시작점에는 둘 수 없으며, 이는 단방향 흐름에는 충분하지만 양방향 연결에는 충분하지 않습니다. TypedLines.AddLine()은 이러한 제약을 제거합니다.

화살표가 없는 기본 선 도형에 대해서는 JavaScript(React)에서 Excel에 선 도형 삽입하기에서 Lines.AddLine() API를 다룹니다.

픽셀 단위의 정밀한 위치 지정

TypedLines.AddLine()은 Top과 Left를 픽셀 단위로 사용하여 선을 배치하며, Width와 Height로 범위를 제어합니다:

let line = sheet.TypedLines.AddLine();
line.Top = 10;     // 10 pixels from the top of the sheet
line.Left = 20;    // 20 pixels from the left
line.Width = 100;  // 100 pixels wide
line.Height = 0;   // 0 height — a horizontal line

Height가 0이면 가로선이 되고, Width가 0이면 세로선이 됩니다. 둘 다 0이 아닌 값으로 설정하면 LineShapeType에 따라 대각선이나 꺾인 연결선이 만들어집니다.

행과 열에서 픽셀 좌표로의 전환은 선이 셀 경계에 맞춰지는 것이 아니라 셀 내부의 특정 지점 — 병합된 범위의 중앙, 테두리의 모서리 — 을 연결해야 할 때 가장 중요합니다. 픽셀 위치 지정을 사용하면 어느 행과 열이 가장 가까운지 추정하는 대신, 알고 있는 레이아웃에서 정확한 시작점과 끝점을 계산할 수 있습니다.

화살표 조합

BeginArrowHeadStyle과 EndArrowHeadStyle을 독립적으로 설정하면 네 가지 조합으로 일반적인 경우를 모두 포괄할 수 있습니다:

화살표 스타일은 양쪽 끝에서 채워진 삼각형이 아닌 열린 V자 모양인 LineArrowOpen일 수도 있습니다. 두 끝에 서로 다른 스타일을 섞는 것도 유효합니다. 한쪽 끝에 채워진 화살표를, 다른 쪽 끝에 열린 화살표를 두면 한 방향은 확정적이고 다른 방향은 잠정적임을 전달합니다.

화살표가 있는 선 삽입

이 예제는 일반적인 조합을 모두 포함하는 여섯 개의 화살표 선을 새 워크시트에 삽입합니다: 양방향 화살표 선, 단방향 화살표 선, 꺾인 화살표 연결선, 꺾인 양방향 화살표 연결선, 곡선 화살표 연결선, 곡선 양방향 화살표 연결선입니다. 단계는 다음과 같습니다:

1. Workbook 개체를 만들고 첫 번째 워크시트를 가져옵니다.
2. Worksheet.TypedLines.AddLine()을 호출하여 각 선을 만듭니다.
3. Top, Left, Width, Height(픽셀 단위)를 통해 선 위치를 설정합니다.
4. BeginArrowHeadStyle과 EndArrowHeadStyle을 통해 양쪽 끝의 화살표 스타일을 설정합니다.
5. LineShapeType(직선, 꺾인 선, 곡선 등)을 통해 선 유형을 지정합니다.
6. Workbook.SaveToFile()로 통합 문서를 저장합니다.

function App() {
  const addArrowLines = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a double-arrow line - solid blue
    let line = sheet.TypedLines.AddLine();
    line.Top = 10;
    line.Left = 20;
    line.Width = 100;
    line.Height = 0;
    line.Color = xlsModule.Color.get_Blue();
    line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a single-arrow line - solid red
    let line_1 = sheet.TypedLines.AddLine();
    line_1.Top = 50;
    line_1.Left = 30;
    line_1.Width = 100;
    line_1.Height = 100;
    line_1.Color = xlsModule.Color.get_Red();
    line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
    line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add an elbow arrow connector
    let line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line3.Top = 100;
    line3.Left = 50;

    // Add an elbow double-arrow connector
    let line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line2.Width = 50;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.Left = 120;
    line2.Top = 100;

    // Add a curved arrow connector
    line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line3.Top = 100;
    line3.Left = 200;

    // Add a curved double-arrow connector
    line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line2.Width = 30;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.Left = 250;
    line2.Top = 100;

    // Save the workbook
    const outputFileName = 'AddArrowLines.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Arrow Lines</h1>
      <button onClick={addArrowLines}>Start</button>
    </div>
  );
}

export default App;

여섯 개의 화살표 선: 양방향 화살표, 단방향 화살표, 꺾인 화살표, 꺾인 양방향 화살표, 곡선 화살표, 곡선 양방향 화살표

함수 후반부에서 line3와 line2 변수를 재사용한 점에 주목하세요. TypedLines.AddLine()을 호출할 때마다 이미 워크시트에 추가된 새로운 선 개체가 반환됩니다. 즉, 변수는 속성을 설정하기 위한 핸들일 뿐이며 보존해야 하는 컨테이너가 아닙니다. 이전 선은 이미 시트의 도형 컬렉션에 반영되어 있으므로 다음 선을 위해 변수 이름을 재사용해도 안전합니다.

기존 선 관리

여러분의 코드로 추가되었든, 파일에서 가져왔든, 사용자가 그렸든 이미 선이 포함된 워크시트는 sheet.Shapes 컬렉션을 통해 이를 노출합니다. 각 도형은 인덱스로 가져올 수 있고 속성을 통해 수정할 수 있습니다:

// Get the first shape in the worksheet
let shape = sheet.Shapes.get(0);
// Modify its properties — color, dash style, etc.
shape.Color = xlsModule.Color.get_Red();

삭제의 경우 sheet.Shapes.Remove(index)가 지정된 인덱스의 도형을 제거합니다. 이름, 유형 또는 위치별로 선을 선택적으로 제거하려면 컬렉션을 반복하면서 일치하는 도형을 제거하세요. 루프에서 삭제할 때는 마지막 인덱스부터 아래로 제거해야 합니다. 요소를 제거하면 그 뒤에 있는 모든 요소의 인덱스가 이동하기 때문입니다.

일반적인 문제

화살촉이 표시되지 않습니다. BeginArrowHeadStyle 또는 EndArrowHeadStyle이 설정되지 않았거나 LineNoArrow로 설정되었습니다. 화살표가 있어야 할 끝이 어느 쪽인지 확인하고 해당 속성을 할당하세요. 두 속성 모두 설정되지 않은 선은 양쪽 끝에 화살표가 없습니다.

선이 잘못된 위치에 나타납니다. Top과 Left는 행과 열이 아니라 픽셀 단위입니다. Top = 10이라는 값은 선을 10번째 행이 아니라 시트 위쪽에서 10픽셀 위치에 배치합니다. Lines.AddLine() API에 익숙하다면 이것이 가장 흔한 위치 오류의 원인입니다.

꺾인 연결선이 잘못된 방향으로 꺾입니다. 꺾이는 방향은 Width와 Height의 부호와 상대적 크기에 따라 달라집니다. 양수 Width와 양수 Height는 오른쪽 아래로 꺾입니다. 부호를 바꾸거나 두 값을 서로 바꾸어 꺾임을 변경하세요. 먼저 작은 값으로 테스트해 보세요.

곡선이 예상한 대로 휘어지지 않습니다. TypedLines를 통한 CurveLine은 시작점과 끝점 사이에 부드러운 호를 그리며, 호의 모양은 Width와 Height의 영향을 받습니다. 직각으로 한 번 꺾이는 꺾인 연결선과 달리 곡선은 연속적이지만, 정확한 경로는 크기에 따라 달라지므로 정밀한 레이아웃에 의존하기 전에 결과를 확인하세요.

FAQ

LineArrow와 LineArrowOpen의 차이는 무엇인가요?

LineArrow는 채워진 삼각형 화살촉을 그립니다. LineArrowOpen은 채움 없이 두 개의 획으로 이루어진 열린 V자 화살촉을 그립니다. 열린 스타일은 화살표가 특정 메커니즘을 암시하지 않고 방향만 나타내는 데이터 흐름도와 개체-관계 다이어그램에서 흔히 사용됩니다.

양쪽 끝에 서로 다른 화살표 스타일을 설정할 수 있나요?

네. BeginArrowHeadStyle과 EndArrowHeadStyle은 독립적인 속성입니다. 한쪽 끝에 LineArrow를, 다른 쪽 끝에 LineArrowOpen을 사용한 선은 유효하며, 한 방향은 확정적이고 다른 방향은 잠정적임을 전달합니다.

픽셀 좌표는 워크시트 레이아웃과 어떻게 관련되나요?

픽셀 좌표는 워크시트의 왼쪽 위 모서리에서 측정됩니다. Excel의 행 높이는 포인트로, 열 너비는 문자 수로 측정되므로, 셀 위치와 픽셀 좌표 사이를 변환하려면 현재 행 높이와 열 너비를 고려해야 합니다. 셀 경계에 맞춰야 하는 선에는 행과 열 매개변수를 사용하는 Lines.AddLine()이 더 간단할 수 있습니다.

같은 워크시트에서 Lines.AddLine()과 TypedLines.AddLine()을 함께 사용할 수 있나요?

네. 두 API 모두 동일한 워크시트의 도형 컬렉션에 도형을 추가합니다. 하나의 워크시트에 기본 선 도형과 화살표가 있는 선을 동시에 포함할 수 있습니다.

Excel이 설치되어 있어야 하나요?

아니요. 이 엔진은 브라우저에서 WebAssembly로 실행됩니다. 선과 화살표는 워크시트 XML에 표준 도형 개체로 기록되며, 파일을 열면 Excel이 기본적으로 렌더링합니다.

관련 항목

• JavaScript(React)에서 Excel에 선 도형 삽입하기
• React 프로젝트에 Spire.XLS for JavaScript 통합하기
• Spire.XLS for JavaScript 제품 페이지

Una linea tra due caselle in un diagramma di flusso dice "queste sono correlate". Una freccia da una all'altra dice "questa viene prima". Questa distinzione — la direzione — è ciò che separa un connettore da una decorazione, ed è l'unica cosa che l'API di base Lines.AddLine() non può fare su entrambe le estremità. Un flusso di processo necessita di una freccia che esce da ogni passaggio; un diagramma causa-effetto necessita di frecce che puntano verso l'interno; un confronto a volte necessita di frecce a doppia punta per mostrare un collegamento bidirezionale. Nessuna di queste è possibile con un singolo EndArrowHeadStyle.

Spire.XLS for JavaScript fornisce sheet.TypedLines.AddLine() esattamente per questo caso. Posiziona le linee tramite coordinate in pixel invece che per riga e colonna, e accetta BeginArrowHeadStyle e EndArrowHeadStyle in modo indipendente — così una linea può avere una freccia su un'estremità, su entrambe o su nessuna. Il motore funziona nel browser su WebAssembly, con i file che passano attraverso un file system virtuale (VFS) e senza alcun backend coinvolto.

Per la configurazione del progetto, vedi Integrazione di Spire.XLS for JavaScript in un progetto React. Gli esempi seguenti presuppongono che il pacchetto sia installato e che il modulo WebAssembly sia stato inizializzato.

La direzione cambia tutto

Tre diagrammi, tre requisiti direzionali diversi, e la stessa API per le linee li gestisce tutti:

Anche lo stile della punta di freccia ha un significato. Una freccia piena e riempita (LineArrow) viene letta come una connessione definita e consolidata. Una freccia aperta (LineArrowOpen) viene letta come una connessione più blanda e meno certa — comune nei diagrammi di flusso dei dati, dove la direzione è nota ma il meccanismo non è specificato.

Prerequisiti

È necessario un progetto React con Spire.XLS for JavaScript installato e il modulo WebAssembly inizializzato, accessibile all'indirizzo window.wasmModule.spirexls. L'esempio carica un font nel VFS e salva con il flag di versione Excel 2010.

TypedLines vs Lines: qual è la differenza

sheet.Lines.AddLine() e sheet.TypedLines.AddLine() sono due API separate per due esigenze separate. Le differenze sono strutturali, non estetiche:

Il supporto della freccia iniziale è la differenza più rilevante. Con Lines.AddLine(), una linea può avere una punta di freccia alla sua estremità finale ma non all'inizio — il che è sufficiente per un flusso unidirezionale ma non per un collegamento bidirezionale. TypedLines.AddLine() elimina questo vincolo.

Per le forme di linea di base senza frecce, Inserire forme di linea in Excel in JavaScript (React) copre l'API Lines.AddLine().

Posizionamento preciso al pixel

TypedLines.AddLine() posiziona le linee usando Top e Left in pixel, con Width e Height che ne controllano l'estensione:

let line = sheet.TypedLines.AddLine();
line.Top = 10;     // 10 pixels from the top of the sheet
line.Left = 20;    // 20 pixels from the left
line.Width = 100;  // 100 pixels wide
line.Height = 0;   // 0 height — a horizontal line

Un Height di 0 produce una linea orizzontale; un Width di 0 ne produce una verticale. Impostando entrambi su valori diversi da zero si ottiene una diagonale o un connettore piegato, a seconda del LineShapeType.

Il passaggio da coordinate di riga e colonna a coordinate in pixel è più importante quando le linee devono collegare punti specifici all'interno delle celle — il centro di un intervallo unito, il bordo di una cornice — invece di allinearsi ai confini delle celle. Il posizionamento in pixel consente di calcolare l'inizio e la fine esatti dal layout che si conosce, invece di stimare quale riga e colonna si avvicini di più.

Combinazioni di frecce

Con BeginArrowHeadStyle e EndArrowHeadStyle impostati in modo indipendente, quattro combinazioni coprono i casi più comuni:

Lo stile della freccia può anche essere LineArrowOpen — una forma a V aperta invece di un triangolo pieno — su entrambe le estremità. Mescolare gli stili sulle due estremità è valido: una freccia piena su un'estremità e una freccia aperta sull'altra comunicano che una direzione è definita e l'altra è incerta.

Inserire linee con punta di freccia

L'esempio inserisce sei linee con punta di freccia in un foglio di lavoro nuovo, coprendo le combinazioni più comuni: una linea a doppia freccia, una linea a freccia singola, un connettore a gomito con freccia, un connettore a gomito a doppia freccia, un connettore curvo con freccia e un connettore curvo a doppia freccia. I passaggi sono:

1. Creare un oggetto Workbook e ottenere il primo foglio di lavoro.
2. Chiamare Worksheet.TypedLines.AddLine() per creare ciascuna linea.
3. Impostare la posizione della linea tramite Top, Left, Width e Height (in pixel).
4. Impostare gli stili delle frecce su entrambe le estremità tramite BeginArrowHeadStyle e EndArrowHeadStyle.
5. Specificare il tipo di linea tramite LineShapeType (dritta, a gomito, curva, ecc.).
6. Salvare il workbook con Workbook.SaveToFile().

function App() {
  const addArrowLines = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a double-arrow line - solid blue
    let line = sheet.TypedLines.AddLine();
    line.Top = 10;
    line.Left = 20;
    line.Width = 100;
    line.Height = 0;
    line.Color = xlsModule.Color.get_Blue();
    line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a single-arrow line - solid red
    let line_1 = sheet.TypedLines.AddLine();
    line_1.Top = 50;
    line_1.Left = 30;
    line_1.Width = 100;
    line_1.Height = 100;
    line_1.Color = xlsModule.Color.get_Red();
    line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
    line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add an elbow arrow connector
    let line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line3.Top = 100;
    line3.Left = 50;

    // Add an elbow double-arrow connector
    let line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line2.Width = 50;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.Left = 120;
    line2.Top = 100;

    // Add a curved arrow connector
    line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line3.Top = 100;
    line3.Left = 200;

    // Add a curved double-arrow connector
    line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line2.Width = 30;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.Left = 250;
    line2.Top = 100;

    // Save the workbook
    const outputFileName = 'AddArrowLines.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Arrow Lines</h1>
      <button onClick={addArrowLines}>Start</button>
    </div>
  );
}

export default App;

Sei linee con punta di freccia: doppia freccia, freccia singola, freccia a gomito, doppia freccia a gomito, freccia curva e doppia freccia curva

Si noti il riutilizzo delle variabili line3 e line2 nella seconda metà della funzione. Ogni chiamata a TypedLines.AddLine() restituisce un nuovo oggetto linea che è già stato aggiunto al foglio di lavoro — la variabile è un riferimento per impostare proprietà, non un contenitore che deve essere conservato. Riutilizzare il nome della variabile per la linea successiva è sicuro perché la linea precedente è già stata inserita nella raccolta di forme del foglio.

Gestire le linee esistenti

Un foglio di lavoro che contiene già delle linee — che siano state aggiunte dal tuo codice, importate da un file o disegnate da un utente — le espone tramite la raccolta sheet.Shapes. Ogni forma può essere recuperata tramite indice e modificata attraverso le sue proprietà:

// Get the first shape in the worksheet
let shape = sheet.Shapes.get(0);
// Modify its properties — color, dash style, etc.
shape.Color = xlsModule.Color.get_Red();

Per l'eliminazione, sheet.Shapes.Remove(index) rimuove la forma all'indice specificato. Per rimuovere le linee in modo selettivo — per nome, per tipo o per posizione — iterare la raccolta e rimuovere le forme corrispondenti. Quando si elimina in un ciclo, procedere dall'ultimo indice verso il basso, poiché la rimozione di un elemento sposta gli indici di tutti gli elementi successivi.

Problemi comuni

La punta della freccia non viene visualizzata. BeginArrowHeadStyle o EndArrowHeadStyle non è stato impostato, oppure è stato impostato su LineNoArrow. Verifica su quale estremità ti aspetti la freccia e assegna la proprietà corrispondente. Una linea con nessuna delle due proprietà impostate non ha frecce su nessuna delle estremità.

La linea appare nella posizione sbagliata. Top e Left sono in pixel, non in righe e colonne. Un valore di Top = 10 posiziona la linea a 10 pixel dalla parte superiore del foglio, non sulla riga 10. Se sei abituato all'API Lines.AddLine(), questa è la fonte più comune di posizionamento errato.

Il connettore a gomito si piega nella direzione sbagliata. La direzione della piega dipende dai segni e dalle grandezze relative di Width e Height. Un Width positivo con un Height positivo piega verso il basso a destra. Inverti il segno o scambia i due valori per cambiare la piega. Prova prima con valori piccoli.

La linea curva non si curva come mi aspettavo. Una CurveLine tramite TypedLines disegna un arco uniforme tra i punti di inizio e fine, e la forma dell'arco è influenzata da Width e Height. A differenza di un connettore a gomito, che ha una singola piega ad angolo retto, una curva è continua — ma il suo percorso esatto dipende dalle dimensioni, quindi verifica il risultato prima di affidarti a essa per un layout preciso.

FAQ

Qual è la differenza tra LineArrow e LineArrowOpen?

LineArrow disegna una punta di freccia triangolare piena. LineArrowOpen disegna una punta di freccia aperta a forma di V — due tratti senza riempimento. Lo stile aperto è comune nei diagrammi di flusso dei dati e nei diagrammi entità-relazione, dove la freccia indica la direzione senza implicare un meccanismo specifico.

Posso impostare stili di freccia diversi sulle due estremità?

Sì. BeginArrowHeadStyle e EndArrowHeadStyle sono proprietà indipendenti. Una linea con LineArrow su un'estremità e LineArrowOpen sull'altra è valida e comunica che una direzione è definita mentre l'altra è incerta.

Come si rapportano le coordinate in pixel al layout del foglio di lavoro?

Le coordinate in pixel sono misurate dall'angolo in alto a sinistra del foglio di lavoro. Le altezze di riga e le larghezze di colonna in Excel sono misurate rispettivamente in punti e caratteri, quindi la conversione tra posizioni di cella e coordinate in pixel richiede di tenere conto delle altezze di riga e delle larghezze di colonna correnti. Per le linee che devono allinearsi ai confini delle celle, Lines.AddLine() con parametri di riga e colonna può essere più semplice.

Posso mescolare Lines.AddLine() e TypedLines.AddLine() nello stesso foglio di lavoro?

Sì. Entrambe le API aggiungono forme alla stessa raccolta di forme del foglio di lavoro. Un foglio di lavoro può contenere contemporaneamente forme di linea di base e linee con punta di freccia.

È necessario avere Excel installato?

No. Il motore funziona come WebAssembly nel browser. Le linee e le frecce vengono scritte come oggetti forma standard nell'XML del foglio di lavoro, ed Excel le visualizza nativamente quando il file viene aperto.

Vedi anche

• Inserire forme di linea in Excel in JavaScript (React)
• Integrazione di Spire.XLS for JavaScript in un progetto React
• Pagina del prodotto Spire.XLS for JavaScript

Une ligne entre deux boîtes dans un organigramme dit « ces éléments sont liés ». Une flèche de l'une vers l'autre dit « celui-ci vient en premier ». Cette distinction — la direction — est ce qui sépare un connecteur d'une décoration, et c'est précisément ce que l'API de base Lines.AddLine() ne peut pas faire aux deux extrémités. Un flux de processus a besoin d'une flèche partant de chaque étape ; un diagramme de cause à effet a besoin de flèches pointant vers l'intérieur ; une comparaison nécessite parfois des flèches à double sens pour montrer un lien bidirectionnel. Aucun de ces cas n'est possible avec un seul EndArrowHeadStyle.

Spire.XLS for JavaScript fournit sheet.TypedLines.AddLine() exactement pour ce cas. Il positionne les lignes par coordonnées en pixels plutôt que par ligne et colonne, et il accepte BeginArrowHeadStyle et EndArrowHeadStyle indépendamment — ainsi une ligne peut porter une flèche à une extrémité, aux deux extrémités, ou à aucune. Le moteur s'exécute dans le navigateur sur WebAssembly, avec des fichiers circulant via un système de fichiers virtuel (VFS) et sans backend impliqué.

Pour la configuration du projet, voir Intégrer Spire.XLS for JavaScript dans un projet React. Les exemples ci-dessous supposent que le package est installé et que le module WebAssembly a été initialisé.

La direction change tout

Trois diagrammes, trois exigences directionnelles différentes, et la même API de ligne gère les trois :

Le style de pointe de flèche lui-même porte aussi une signification. Une flèche pleine et remplie (LineArrow) se lit comme une connexion définitive et engagée. Une flèche ouverte (LineArrowOpen) se lit comme une connexion plus souple et moins certaine — courante dans les diagrammes de flux de données où la direction est connue mais le mécanisme n'est pas spécifié.

Prérequis

Vous avez besoin d'un projet React avec Spire.XLS for JavaScript installé et le module WebAssembly initialisé, accessible via window.wasmModule.spirexls. L'exemple charge une police dans le VFS et enregistre avec l'indicateur de version Excel 2010.

TypedLines vs Lines : quelle différence

sheet.Lines.AddLine() et sheet.TypedLines.AddLine() sont deux API distinctes pour deux besoins distincts. Les différences sont structurelles, non cosmétiques :

La prise en charge de la flèche au début est la différence la plus importante. Avec Lines.AddLine(), une ligne peut avoir une pointe de flèche à sa fin mais pas à son début — ce qui suffit pour un flux unidirectionnel mais pas pour un lien bidirectionnel. TypedLines.AddLine() supprime cette contrainte.

Pour les formes de lignes de base sans flèches, Insérer des formes de lignes dans Excel en JavaScript (React) couvre l'API Lines.AddLine().

Positionnement au pixel près

TypedLines.AddLine() place les lignes à l'aide de Top et Left en pixels, avec Width et Height contrôlant l'étendue :

let line = sheet.TypedLines.AddLine();
line.Top = 10;     // 10 pixels from the top of the sheet
line.Left = 20;    // 20 pixels from the left
line.Width = 100;  // 100 pixels wide
line.Height = 0;   // 0 height — a horizontal line

Un Height de 0 produit une ligne horizontale ; un Width de 0 produit une ligne verticale. Définir les deux à des valeurs non nulles produit une diagonale ou un connecteur coudé, selon le LineShapeType.

Le passage des lignes et colonnes aux coordonnées en pixels importe surtout lorsque les lignes doivent relier des points précis à l'intérieur des cellules — le milieu d'une plage fusionnée, le bord d'une bordure — plutôt que de s'aligner sur les limites des cellules. Le positionnement en pixels vous permet de calculer le début et la fin exacts à partir de la disposition que vous connaissez, plutôt que d'estimer quelle ligne et quelle colonne s'en approche le plus.

Combinaisons de flèches

Avec BeginArrowHeadStyle et EndArrowHeadStyle définis indépendamment, quatre combinaisons couvrent les cas courants :

Le style de flèche peut aussi être LineArrowOpen — une forme de V ouverte plutôt qu'un triangle rempli — à l'une ou l'autre extrémité. Mélanger les styles aux deux extrémités est valide : une flèche remplie à une extrémité et une flèche ouverte à l'autre indiquent qu'une direction est définitive et l'autre incertaine.

Insérer des lignes à pointe de flèche

L'exemple insère six lignes à pointe de flèche dans une nouvelle feuille de calcul, couvrant les combinaisons courantes : une ligne à double flèche, une ligne à flèche unique, un connecteur coudé à flèche, un connecteur coudé à double flèche, un connecteur courbe à flèche, et un connecteur courbe à double flèche. Les étapes sont :

1. Créer un objet Workbook et obtenir la première feuille de calcul.
2. Appeler Worksheet.TypedLines.AddLine() pour créer chaque ligne.
3. Définir la position de la ligne via Top, Left, Width et Height (en pixels).
4. Définir les styles de flèches aux deux extrémités via BeginArrowHeadStyle et EndArrowHeadStyle.
5. Spécifier le type de ligne via LineShapeType (droite, coudée, courbe, etc.).
6. Enregistrer le classeur avec Workbook.SaveToFile().

function App() {
  const addArrowLines = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a double-arrow line - solid blue
    let line = sheet.TypedLines.AddLine();
    line.Top = 10;
    line.Left = 20;
    line.Width = 100;
    line.Height = 0;
    line.Color = xlsModule.Color.get_Blue();
    line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a single-arrow line - solid red
    let line_1 = sheet.TypedLines.AddLine();
    line_1.Top = 50;
    line_1.Left = 30;
    line_1.Width = 100;
    line_1.Height = 100;
    line_1.Color = xlsModule.Color.get_Red();
    line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
    line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add an elbow arrow connector
    let line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line3.Top = 100;
    line3.Left = 50;

    // Add an elbow double-arrow connector
    let line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line2.Width = 50;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.Left = 120;
    line2.Top = 100;

    // Add a curved arrow connector
    line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line3.Top = 100;
    line3.Left = 200;

    // Add a curved double-arrow connector
    line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line2.Width = 30;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.Left = 250;
    line2.Top = 100;

    // Save the workbook
    const outputFileName = 'AddArrowLines.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Arrow Lines</h1>
      <button onClick={addArrowLines}>Start</button>
    </div>
  );
}

export default App;

Six lignes à pointe de flèche : double flèche, flèche unique, flèche coudée, double flèche coudée, flèche courbe et double flèche courbe

Notez la réutilisation des variables line3 et line2 dans la seconde moitié de la fonction. Chaque appel à TypedLines.AddLine() renvoie un nouvel objet ligne qui a déjà été ajouté à la feuille de calcul — la variable est un descripteur pour définir des propriétés, non un conteneur à conserver. Réutiliser le nom de variable pour la ligne suivante est sans risque car la ligne précédente est déjà engagée dans la collection de formes de la feuille.

Gérer les lignes existantes

Une feuille de calcul qui contient déjà des lignes — qu'elles aient été ajoutées par votre code, importées depuis un fichier ou dessinées par un utilisateur — les expose via la collection sheet.Shapes. Chaque forme peut être récupérée par index et modifiée via ses propriétés :

// Get the first shape in the worksheet
let shape = sheet.Shapes.get(0);
// Modify its properties — color, dash style, etc.
shape.Color = xlsModule.Color.get_Red();

Pour la suppression, sheet.Shapes.Remove(index) supprime la forme à l'index spécifié. Pour supprimer des lignes de manière sélective — par nom, par type ou par position — parcourez la collection et supprimez les formes correspondantes. Supprimez depuis le dernier index vers le premier lors d'une suppression en boucle, car la suppression d'un élément décale les index de tous les éléments suivants.

Problèmes courants

La pointe de flèche ne s'affiche pas. BeginArrowHeadStyle ou EndArrowHeadStyle n'a pas été défini, ou a été défini sur LineNoArrow. Vérifiez à quelle extrémité vous attendez la flèche et attribuez la propriété correspondante. Une ligne dont aucune des deux propriétés n'est définie n'a aucune flèche à ses extrémités.

La ligne apparaît à la mauvaise position. Top et Left sont en pixels, pas en lignes et colonnes. Une valeur de Top = 10 place la ligne à 10 pixels du haut de la feuille, pas sur la ligne 10. Si vous êtes habitué à l'API Lines.AddLine(), c'est la source la plus fréquente de mauvais placement.

Le connecteur coudé se plie dans la mauvaise direction. La direction du coude dépend des signes et des magnitudes relatives de Width et Height. Un Width positif avec un Height positif plie vers le bas à droite. Inversez le signe ou échangez les deux valeurs pour changer le coude. Testez d'abord avec de petites valeurs.

La ligne courbe ne se courbe pas comme je l'attendais. Une CurveLine via TypedLines dessine un arc lisse entre les points de début et de fin, et la forme de l'arc est influencée par Width et Height. Contrairement à un connecteur coudé, qui a un seul virage à angle droit, une courbe est continue — mais son tracé exact dépend des dimensions, alors vérifiez le rendu avant de vous y fier pour une disposition précise.

FAQ

Quelle est la différence entre LineArrow et LineArrowOpen ?

LineArrow dessine une pointe de flèche triangulaire remplie. LineArrowOpen dessine une pointe de flèche ouverte en forme de V — deux traits sans remplissage. Le style ouvert est courant dans les diagrammes de flux de données et d'entité-relation où la flèche indique la direction sans impliquer un mécanisme spécifique.

Puis-je définir différents styles de flèches aux deux extrémités ?

Oui. BeginArrowHeadStyle et EndArrowHeadStyle sont des propriétés indépendantes. Une ligne avec LineArrow à une extrémité et LineArrowOpen à l'autre est valide et indique qu'une direction est définitive tandis que l'autre est incertaine.

Quel est le rapport entre les coordonnées en pixels et la disposition de la feuille de calcul ?

Les coordonnées en pixels sont mesurées à partir du coin supérieur gauche de la feuille de calcul. Les hauteurs de lignes et les largeurs de colonnes dans Excel sont mesurées respectivement en points et en caractères, donc convertir entre positions de cellules et coordonnées en pixels nécessite de tenir compte des hauteurs de lignes et largeurs de colonnes actuelles. Pour les lignes qui doivent s'aligner sur les limites des cellules, Lines.AddLine() avec des paramètres de lignes et colonnes peut être plus simple.

Puis-je mélanger Lines.AddLine() et TypedLines.AddLine() dans la même feuille de calcul ?

Oui. Les deux API ajoutent des formes à la collection de formes de la même feuille de calcul. Une feuille de calcul peut contenir simultanément des formes de lignes de base et des lignes à pointe de flèche.

Cela nécessite-t-il qu'Excel soit installé ?

Non. Le moteur s'exécute en WebAssembly dans le navigateur. Les lignes et les flèches sont écrites comme objets de forme standard dans le XML de la feuille de calcul, et Excel les rend nativement lorsque le fichier est ouvert.

Voir aussi

• Insérer des formes de lignes dans Excel en JavaScript (React)
• Intégrer Spire.XLS for JavaScript dans un projet React
• Page produit Spire.XLS for JavaScript

Una línea entre dos cuadros en un diagrama de flujo dice "estos están relacionados". Una flecha de uno hacia el otro dice "este va primero". Esa distinción — la dirección — es lo que separa un conector de una decoración, y es lo único que la API básica Lines.AddLine() no puede hacer en ambos extremos. Un flujo de proceso necesita una flecha que salga de cada paso; un diagrama de causa y efecto necesita flechas que apunten hacia dentro; una comparación a veces necesita flechas de doble punta para mostrar un vínculo bidireccional. Nada de esto es posible con un único EndArrowHeadStyle.

Spire.XLS for JavaScript proporciona sheet.TypedLines.AddLine() precisamente para este caso. Posiciona las líneas mediante coordenadas en píxeles en lugar de filas y columnas, y acepta BeginArrowHeadStyle y EndArrowHeadStyle de forma independiente, de modo que una línea puede llevar una flecha en un extremo, en ambos extremos o en ninguno. El motor se ejecuta en el navegador sobre WebAssembly, con los archivos moviéndose a través de un sistema de archivos virtual (VFS) y sin ningún backend implicado.

Para la configuración del proyecto, consulte Integrating Spire.XLS for JavaScript in a React Project. Los ejemplos a continuación asumen que el paquete está instalado y que el módulo WebAssembly se ha inicializado.

La dirección lo cambia todo

Tres diagramas, tres requisitos direccionales diferentes, y la misma API de líneas los gestiona todos:

El propio estilo de la punta de flecha también transmite significado. Una flecha rellena sólida (LineArrow) se interpreta como una conexión definida y comprometida. Una flecha abierta (LineArrowOpen) se interpreta como una más flexible y menos segura, común en diagramas de flujo de datos donde la dirección se conoce pero el mecanismo no está especificado.

Requisitos previos

Necesita un proyecto de React con Spire.XLS for JavaScript instalado y el módulo WebAssembly inicializado, accesible en window.wasmModule.spirexls. El ejemplo carga una fuente en el VFS y guarda con la marca de versión de Excel 2010.

TypedLines vs Lines: en qué se diferencian

sheet.Lines.AddLine() y sheet.TypedLines.AddLine() son dos API separadas para dos necesidades distintas. Las diferencias son estructurales, no cosméticas:

La compatibilidad con flechas en el inicio es la diferencia más trascendental. Con Lines.AddLine(), una línea puede tener una punta de flecha en su final pero no en su inicio, lo cual es suficiente para un flujo unidireccional pero no para un vínculo bidireccional. TypedLines.AddLine() elimina esa restricción.

Para formas de línea básicas sin flechas, Insert Line Shapes in Excel in JavaScript (React) cubre la API Lines.AddLine().

Posicionamiento preciso al píxel

TypedLines.AddLine() coloca las líneas usando Top y Left en píxeles, con Width y Height controlando la extensión:

let line = sheet.TypedLines.AddLine();
line.Top = 10;     // 10 píxeles desde la parte superior de la hoja
line.Left = 20;    // 20 píxeles desde la izquierda
line.Width = 100;  // 100 píxeles de ancho
line.Height = 0;   // altura 0 — una línea horizontal

Un Height de 0 produce una línea horizontal; un Width de 0 produce una vertical. Establecer ambos en valores distintos de cero produce una diagonal o un conector acodado, según el LineShapeType.

El cambio de coordenadas de fila y columna a píxeles importa sobre todo cuando las líneas necesitan conectar puntos específicos dentro de las celdas — el centro de un rango combinado, el borde de un borde de celda — en lugar de alinearse con los límites de las celdas. El posicionamiento en píxeles le permite calcular el inicio y el final exactos a partir del diseño que conoce, en lugar de estimar qué fila y columna queda más cerca.

Combinaciones de flechas

Con BeginArrowHeadStyle y EndArrowHeadStyle establecidos de forma independiente, cuatro combinaciones cubren los casos comunes:

El estilo de flecha también puede ser LineArrowOpen — una forma de V abierta en lugar de un triángulo relleno — en cualquiera de los extremos. Mezclar estilos en los dos extremos es válido: una flecha rellena en un extremo y una flecha abierta en el otro comunica que una dirección es definida y la otra es tentativa.

Insertar líneas con punta de flecha

El ejemplo inserta seis líneas con punta de flecha en una hoja de cálculo nueva, cubriendo las combinaciones comunes: una línea de doble flecha, una línea de flecha simple, un conector de flecha acodado, un conector acodado de doble flecha, un conector de flecha curvo y un conector curvo de doble flecha. Los pasos son:

1. Crear un objeto Workbook y obtener la primera hoja de cálculo.
2. Llamar a Worksheet.TypedLines.AddLine() para crear cada línea.
3. Establecer la posición de la línea mediante Top, Left, Width y Height (en píxeles).
4. Establecer los estilos de flecha en ambos extremos mediante BeginArrowHeadStyle y EndArrowHeadStyle.
5. Especificar el tipo de línea mediante LineShapeType (recta, acodada, curva, etc.).
6. Guardar el libro con Workbook.SaveToFile().

function App() {
  const addArrowLines = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a double-arrow line - solid blue
    let line = sheet.TypedLines.AddLine();
    line.Top = 10;
    line.Left = 20;
    line.Width = 100;
    line.Height = 0;
    line.Color = xlsModule.Color.get_Blue();
    line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a single-arrow line - solid red
    let line_1 = sheet.TypedLines.AddLine();
    line_1.Top = 50;
    line_1.Left = 30;
    line_1.Width = 100;
    line_1.Height = 100;
    line_1.Color = xlsModule.Color.get_Red();
    line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
    line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add an elbow arrow connector
    let line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line3.Top = 100;
    line3.Left = 50;

    // Add an elbow double-arrow connector
    let line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line2.Width = 50;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.Left = 120;
    line2.Top = 100;

    // Add a curved arrow connector
    line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line3.Top = 100;
    line3.Left = 200;

    // Add a curved double-arrow connector
    line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line2.Width = 30;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.Left = 250;
    line2.Top = 100;

    // Save the workbook
    const outputFileName = 'AddArrowLines.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Arrow Lines</h1>
      <button onClick={addArrowLines}>Start</button>
    </div>
  );
}

export default App;

Seis líneas con punta de flecha: doble flecha, flecha simple, flecha acodada, doble flecha acodada, flecha curva y doble flecha curva

Observe la reutilización de las variables line3 y line2 en la segunda mitad de la función. Cada llamada a TypedLines.AddLine() devuelve un nuevo objeto de línea que ya se ha añadido a la hoja de cálculo: la variable es un identificador para establecer propiedades, no un contenedor que deba conservarse. Reutilizar el nombre de la variable para la siguiente línea es seguro porque la línea anterior ya está confirmada en la colección de formas de la hoja.

Gestionar líneas existentes

Una hoja de cálculo que ya contiene líneas — ya sea añadidas por su código, importadas desde un archivo o dibujadas por un usuario — las expone a través de la colección sheet.Shapes. Cada forma se puede recuperar por índice y modificar a través de sus propiedades:

// Get the first shape in the worksheet
let shape = sheet.Shapes.get(0);
// Modify its properties — color, dash style, etc.
shape.Color = xlsModule.Color.get_Red();

Para la eliminación, sheet.Shapes.Remove(index) elimina la forma en el índice especificado. Para eliminar líneas de forma selectiva — por nombre, por tipo o por posición — recorra la colección y elimine las formas que coincidan. Elimine desde el último índice hacia abajo cuando elimine en un bucle, ya que al eliminar un elemento se desplazan los índices de todos los elementos posteriores.

Problemas comunes

La punta de flecha no aparece. No se estableció BeginArrowHeadStyle o EndArrowHeadStyle, o se estableció en LineNoArrow. Compruebe en qué extremo espera la flecha y asigne la propiedad correspondiente. Una línea sin ninguna de las dos propiedades establecidas no tiene flechas en ninguno de los extremos.

La línea aparece en la posición equivocada. Top y Left están en píxeles, no en filas y columnas. Un valor de Top = 10 coloca la línea a 10 píxeles de la parte superior de la hoja, no en la fila 10. Si está acostumbrado a la API Lines.AddLine(), esta es la causa más común de mala colocación.

El conector acodado se dobla en la dirección equivocada. La dirección del doblez depende de los signos y las magnitudes relativas de Width y Height. Un Width positivo con un Height positivo se dobla hacia abajo a la derecha. Cambie el signo o intercambie los dos valores para cambiar el doblez. Pruebe primero con valores pequeños.

La línea curva no se curva como esperaba. Una CurveLine a través de TypedLines dibuja un arco suave entre los puntos de inicio y fin, y la forma del arco se ve influida por Width y Height. A diferencia de un conector acodado, que tiene un único doblez en ángulo recto, una curva es continua, pero su trayectoria exacta depende de las dimensiones, así que verifique el resultado antes de confiar en ella para un diseño preciso.

Preguntas frecuentes

¿Cuál es la diferencia entre LineArrow y LineArrowOpen?

LineArrow dibuja una punta de flecha triangular rellena. LineArrowOpen dibuja una punta de flecha abierta en forma de V: dos trazos sin relleno. El estilo abierto es común en diagramas de flujo de datos y de entidad-relación, donde la flecha indica la dirección sin implicar un mecanismo específico.

¿Puedo establecer estilos de flecha diferentes en los dos extremos?

Sí. BeginArrowHeadStyle y EndArrowHeadStyle son propiedades independientes. Una línea con LineArrow en un extremo y LineArrowOpen en el otro es válida y comunica que una dirección es definida mientras que la otra es tentativa.

¿Cómo se relacionan las coordenadas en píxeles con el diseño de la hoja de cálculo?

Las coordenadas en píxeles se miden desde la esquina superior izquierda de la hoja de cálculo. Las alturas de fila y los anchos de columna en Excel se miden en puntos y caracteres respectivamente, por lo que convertir entre posiciones de celdas y coordenadas en píxeles requiere tener en cuenta las alturas de fila y los anchos de columna actuales. Para líneas que necesitan alinearse con los límites de las celdas, Lines.AddLine() con parámetros de fila y columna puede ser más sencillo.

¿Puedo mezclar Lines.AddLine() y TypedLines.AddLine() en la misma hoja de cálculo?

Sí. Ambas API añaden formas a la misma colección de formas de la hoja de cálculo. Una hoja de cálculo puede contener formas de línea básicas y líneas con punta de flecha simultáneamente.

¿Esto requiere que Excel esté instalado?

No. El motor se ejecuta como WebAssembly en el navegador. Las líneas y flechas se escriben como objetos de forma estándar en el XML de la hoja de cálculo, y Excel las representa de forma nativa cuando se abre el archivo.

Véase también

• Insert Line Shapes in Excel in JavaScript (React)
• Integrating Spire.XLS for JavaScript in a React Project
• Spire.XLS for JavaScript Product Page

Eine Linie zwischen zwei Kästen in einem Flussdiagramm besagt „diese stehen in Beziehung zueinander“. Ein Pfeil von einem zum anderen besagt „dieser kommt zuerst“. Diese Unterscheidung – die Richtung – ist es, was eine Verbindungslinie von einer Dekoration trennt, und sie ist genau das, was die grundlegende Lines.AddLine()-API an beiden Enden nicht leisten kann. Ein Prozessablauf benötigt einen Pfeil, der jeden Schritt verlässt; ein Ursache-Wirkungs-Diagramm benötigt Pfeile, die darauf zeigen; ein Vergleich benötigt manchmal Doppelpfeile, um eine bidirektionale Verbindung darzustellen. Nichts davon ist mit einem einzigen EndArrowHeadStyle möglich.

Spire.XLS for JavaScript bietet sheet.TypedLines.AddLine() genau für diesen Fall. Es positioniert Linien anhand von Pixelkoordinaten statt anhand von Zeilen und Spalten und akzeptiert BeginArrowHeadStyle und EndArrowHeadStyle unabhängig voneinander – so kann eine Linie an einem Ende, an beiden Enden oder an keinem Ende einen Pfeil tragen. Die Engine läuft im Browser auf WebAssembly, wobei Dateien über ein virtuelles Dateisystem (VFS) verarbeitet werden und kein Backend beteiligt ist.

Zur Projekteinrichtung siehe Integrieren von Spire.XLS for JavaScript in ein React-Projekt. Die folgenden Beispiele setzen voraus, dass das Paket installiert und das WebAssembly-Modul initialisiert wurde.

Die Richtung verändert alles

Drei Diagramme, drei unterschiedliche Richtungsanforderungen, und dieselbe Linien-API bewältigt sie alle:

Auch der Pfeilspitzenstil selbst trägt Bedeutung. Ein ausgefüllter massiver Pfeil (LineArrow) wird als definitive, verbindliche Verbindung gelesen. Ein offener Pfeil (LineArrowOpen) wird als lockerere, weniger sichere Verbindung gelesen – üblich in Datenflussdiagrammen, in denen die Richtung bekannt, der Mechanismus aber nicht spezifiziert ist.

Voraussetzungen

Sie benötigen ein React-Projekt mit installiertem Spire.XLS for JavaScript und initialisiertem WebAssembly-Modul, erreichbar unter window.wasmModule.spirexls. Das Beispiel lädt eine Schriftart in das VFS und speichert mit dem Versionsflag für Excel 2010.

TypedLines vs. Lines: Was ist der Unterschied

sheet.Lines.AddLine() und sheet.TypedLines.AddLine() sind zwei getrennte APIs für zwei getrennte Anforderungen. Die Unterschiede sind struktureller, nicht kosmetischer Natur:

Die Unterstützung von Pfeilen am Anfang ist der folgenreichste Unterschied. Bei Lines.AddLine() kann eine Linie eine Pfeilspitze an ihrem Ende, aber nicht an ihrem Anfang haben – das reicht für einen einseitigen Fluss, aber nicht für eine bidirektionale Verbindung. TypedLines.AddLine() beseitigt diese Einschränkung.

Für grundlegende Linienformen ohne Pfeile behandelt Linienformen in Excel in JavaScript (React) einfügen die Lines.AddLine()-API.

Pixelgenaue Positionierung

TypedLines.AddLine() platziert Linien anhand von Top und Left in Pixeln, wobei Width und Height die Ausdehnung steuern:

let line = sheet.TypedLines.AddLine();
line.Top = 10;     // 10 pixels from the top of the sheet
line.Left = 20;    // 20 pixels from the left
line.Width = 100;  // 100 pixels wide
line.Height = 0;   // 0 height — a horizontal line

Ein Height von 0 erzeugt eine horizontale Linie; ein Width von 0 erzeugt eine vertikale. Werden beide auf Werte ungleich null gesetzt, entsteht eine diagonale oder eine geknickte Verbindungslinie, je nach LineShapeType.

Der Wechsel von Zeilen-und-Spalten- zu Pixelkoordinaten ist vor allem dann wichtig, wenn Linien bestimmte Punkte innerhalb von Zellen verbinden müssen – die Mitte eines verbundenen Bereichs, den Rand einer Umrandung –, anstatt sich an Zellgrenzen auszurichten. Die Pixelpositionierung ermöglicht es Ihnen, den exakten Anfang und das exakte Ende aus dem Ihnen bekannten Layout zu berechnen, anstatt zu schätzen, welche Zeile und Spalte am nächsten kommt.

Pfeilkombinationen

Da BeginArrowHeadStyle und EndArrowHeadStyle unabhängig voneinander festgelegt werden, decken vier Kombinationen die gängigen Fälle ab:

Der Pfeilstil kann an beiden Enden auch LineArrowOpen sein – eine offene V-Form statt eines ausgefüllten Dreiecks. Das Mischen von Stilen an den beiden Enden ist zulässig: ein ausgefüllter Pfeil an einem Ende und ein offener Pfeil am anderen vermittelt, dass eine Richtung definitiv und die andere vorläufig ist.

Linien mit Pfeilspitzen einfügen

Das Beispiel fügt sechs Linien mit Pfeilspitzen in ein neues Arbeitsblatt ein und deckt die gängigen Kombinationen ab: eine Doppelpfeillinie, eine Einzelpfeillinie, eine geknickte Pfeilverbindung, eine geknickte Doppelpfeilverbindung, eine geschwungene Pfeilverbindung und eine geschwungene Doppelpfeilverbindung. Die Schritte sind:

1. Erstellen Sie ein Workbook-Objekt und rufen Sie das erste Arbeitsblatt ab.
2. Rufen Sie Worksheet.TypedLines.AddLine() auf, um jede Linie zu erstellen.
3. Legen Sie die Linienposition über Top, Left, Width und Height fest (in Pixeln).
4. Legen Sie die Pfeilstile an beiden Enden über BeginArrowHeadStyle und EndArrowHeadStyle fest.
5. Geben Sie den Linientyp über LineShapeType an (gerade, geknickt, geschwungen usw.).
6. Speichern Sie die Arbeitsmappe mit Workbook.SaveToFile().

function App() {
  const addArrowLines = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check whether the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS for text measurement and column auto-fit
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Add a double-arrow line - solid blue
    let line = sheet.TypedLines.AddLine();
    line.Top = 10;
    line.Left = 20;
    line.Width = 100;
    line.Height = 0;
    line.Color = xlsModule.Color.get_Blue();
    line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add a single-arrow line - solid red
    let line_1 = sheet.TypedLines.AddLine();
    line_1.Top = 50;
    line_1.Left = 30;
    line_1.Width = 100;
    line_1.Height = 100;
    line_1.Color = xlsModule.Color.get_Red();
    line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
    line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;

    // Add an elbow arrow connector
    let line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line3.Top = 100;
    line3.Left = 50;

    // Add an elbow double-arrow connector
    let line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
    line2.Width = 50;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
    line2.Left = 120;
    line2.Top = 100;

    // Add a curved arrow connector
    line3 = sheet.TypedLines.AddLine();
    line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line3.Width = 30;
    line3.Height = 50;
    line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line3.Top = 100;
    line3.Left = 200;

    // Add a curved double-arrow connector
    line2 = sheet.TypedLines.AddLine();
    line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
    line2.Width = 30;
    line2.Height = 50;
    line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
    line2.Left = 250;
    line2.Top = 100;

    // Save the workbook
    const outputFileName = 'AddArrowLines.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // Release resources
    workbook.Dispose();

    // Read the saved file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Add Arrow Lines</h1>
      <button onClick={addArrowLines}>Start</button>
    </div>
  );
}

export default App;

Sechs Linien mit Pfeilspitzen: Doppelpfeil, Einzelpfeil, geknickter Pfeil, geknickter Doppelpfeil, geschwungener Pfeil und geschwungener Doppelpfeil

Beachten Sie die Wiederverwendung der Variablen line3 und line2 in der zweiten Hälfte der Funktion. Jeder Aufruf von TypedLines.AddLine() gibt ein neues Linienobjekt zurück, das bereits zum Arbeitsblatt hinzugefügt wurde – die Variable ist ein Handle zum Festlegen von Eigenschaften, kein Container, der erhalten bleiben muss. Die Wiederverwendung des Variablennamens für die nächste Linie ist sicher, da die vorherige Linie bereits in der Formensammlung des Blatts festgeschrieben ist.

Bestehende Linien verwalten

Ein Arbeitsblatt, das bereits Linien enthält – sei es durch Ihren Code hinzugefügt, aus einer Datei importiert oder von einem Benutzer gezeichnet – macht sie über die sheet.Shapes-Sammlung verfügbar. Jede Form kann über den Index abgerufen und über ihre Eigenschaften geändert werden:

// Get the first shape in the worksheet
let shape = sheet.Shapes.get(0);
// Modify its properties — color, dash style, etc.
shape.Color = xlsModule.Color.get_Red();

Zum Löschen entfernt sheet.Shapes.Remove(index) die Form am angegebenen Index. Um Linien selektiv zu entfernen – nach Name, nach Typ oder nach Position –, durchlaufen Sie die Sammlung und entfernen Sie die passenden Formen. Löschen Sie in einer Schleife vom letzten Index abwärts, da das Entfernen eines Elements die Indizes aller nachfolgenden Elemente verschiebt.

Häufige Probleme

Die Pfeilspitze wird nicht angezeigt. BeginArrowHeadStyle oder EndArrowHeadStyle wurde nicht festgelegt oder auf LineNoArrow gesetzt. Prüfen Sie, an welchem Ende Sie den Pfeil erwarten, und weisen Sie die entsprechende Eigenschaft zu. Eine Linie, bei der keine der beiden Eigenschaften festgelegt ist, hat an keinem Ende Pfeile.

Die Linie erscheint an der falschen Position. Top und Left sind in Pixeln angegeben, nicht in Zeilen und Spalten. Der Wert Top = 10 platziert die Linie 10 Pixel vom oberen Rand des Blatts entfernt, nicht in Zeile 10. Wenn Sie die Lines.AddLine()-API gewohnt sind, ist dies die häufigste Ursache für eine Fehlplatzierung.

Die geknickte Verbindungslinie knickt in die falsche Richtung. Die Knickrichtung hängt von den Vorzeichen und den relativen Größen von Width und Height ab. Ein positives Width mit einem positiven Height knickt nach unten rechts. Vertauschen Sie das Vorzeichen oder die beiden Werte, um den Knick zu ändern. Testen Sie zunächst mit kleinen Werten.

Die geschwungene Linie krümmt sich nicht so, wie ich es erwartet habe. Eine CurveLine über TypedLines zeichnet einen glatten Bogen zwischen Start- und Endpunkt, und die Form des Bogens wird von Width und Height beeinflusst. Anders als eine geknickte Verbindungslinie, die einen einzigen rechtwinkligen Knick aufweist, ist eine Kurve kontinuierlich – aber ihr genauer Verlauf hängt von den Abmessungen ab, prüfen Sie also die Ausgabe, bevor Sie sich für ein präzises Layout darauf verlassen.

FAQ

Was ist der Unterschied zwischen LineArrow und LineArrowOpen?

LineArrow zeichnet eine ausgefüllte dreieckige Pfeilspitze. LineArrowOpen zeichnet eine offene V-förmige Pfeilspitze – zwei Striche ohne Füllung. Der offene Stil ist in Datenfluss- und Entity-Relationship-Diagrammen üblich, in denen der Pfeil die Richtung anzeigt, ohne einen bestimmten Mechanismus zu implizieren.

Kann ich an den beiden Enden unterschiedliche Pfeilstile festlegen?

Ja. BeginArrowHeadStyle und EndArrowHeadStyle sind unabhängige Eigenschaften. Eine Linie mit LineArrow an einem Ende und LineArrowOpen am anderen ist zulässig und vermittelt, dass eine Richtung definitiv und die andere vorläufig ist.

Wie stehen Pixelkoordinaten zum Layout des Arbeitsblatts in Beziehung?

Pixelkoordinaten werden von der oberen linken Ecke des Arbeitsblatts aus gemessen. Zeilenhöhen und Spaltenbreiten in Excel werden in Punkten bzw. Zeichen gemessen, sodass für die Umrechnung zwischen Zellpositionen und Pixelkoordinaten die aktuellen Zeilenhöhen und Spaltenbreiten berücksichtigt werden müssen. Für Linien, die an Zellgrenzen ausgerichtet werden müssen, ist Lines.AddLine() mit Zeilen- und Spaltenparametern möglicherweise einfacher.

Kann ich Lines.AddLine() und TypedLines.AddLine() im selben Arbeitsblatt mischen?

Ja. Beide APIs fügen Formen zur Formensammlung desselben Arbeitsblatts hinzu. Ein Arbeitsblatt kann gleichzeitig grundlegende Linienformen und Linien mit Pfeilspitzen enthalten.

Erfordert dies eine installierte Excel-Version?

Nein. Die Engine läuft als WebAssembly im Browser. Linien und Pfeile werden als Standard-Formobjekte in der Arbeitsblatt-XML geschrieben, und Excel rendert sie beim Öffnen der Datei nativ.

Siehe auch

• Linienformen in Excel in JavaScript (React) einfügen
• Integrieren von Spire.XLS for JavaScript in ein React-Projekt
• Produktseite von Spire.XLS for JavaScript