Katucharts
Comenzar
Mapas

Mapa de Flujo

type: 'flowmap'

Bandas curvas, afinadas y direccionales entre dos puntos geográficos. Los extremos son pares [lon, lat] o el id de un punto de una serie mappoint vecina; el grosor de la banda escala con el weight de cada enlace y una flecha marca el destino.

Edita el JSON a la derecha y presiona Ejecutar (o ⌘/Ctrl + Intro) — los datos, títulos, categorías y colores se actualizan en vivo.

En Vivo
Mapa de Flujo
Editar · JSON

Formato de datos

{ from, to, weight } · [from, to, weight] (from/to: id del punto o [lon,lat])

Estructura de datos

El JSON que pasas dentro del gráfico — colócalo directamente en tu series.

data: [
  ['London', 'New York', 8],
  ['Tokyo', 'Sydney', 5],
  ['São Paulo', 'London', 4]
]

Ejemplo

import KatuCharts from 'katucharts.js';

KatuCharts.chart('container', {
  chart: { type: 'map' },
  chart: { type: 'map', map: world },
  series: [
    { type: 'map', mapData: world, data: [] },
    { type: 'mappoint', data: [
      { id: 'London', lat: 51.5, lon: -0.12 },
      { id: 'New York', lat: 40.71, lon: -74 }
    ] },
    {
      type: 'flowmap', width: 14,
      data: [
        ['London', 'New York', 8],
        ['Tokyo', 'Sydney', 5]
      ]
    }
  ]
});

Opciones específicas del tipo

OpciónDescripción
from / toExtremos: id de un mappoint o par [lon, lat].
weightMagnitud relativa del enlace → grosor de la banda.
widthAncho máximo de la banda en píxeles.
curveFactorCurvatura lateral de la banda (predet. 0.3).
fillOpacityOpacidad del relleno de la banda.

Common errors

Why does my mapa de flujo chart render as a line chart?
The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?
The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?
The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

FAQ

How do I create a mapa de flujo chart in JavaScript?
Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'flowmap' }, series: [...] }).
Why does my mapa de flujo chart render as a line chart?
The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?
The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?
The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.
Las opciones comunes (color, visible, marker, dataLabels, animation, events, zones…) se aplican a todos los tipos — véase Configuración → series. Míralo renderizado en la galería.