Katucharts
Começar
Mapas

Mapa de Fluxo

type: 'flowmap'

Faixas curvas, afiladas e direcionais entre dois pontos geográficos. Os extremos são pares [lon, lat] ou o id de um ponto de uma série mappoint vizinha; a espessura da faixa varia com o weight de cada ligação e uma seta marca o destino.

Edite o JSON à direita e pressione Executar (ou ⌘/Ctrl + Enter) — dados, títulos, categorias e cores se atualizam ao vivo.

Ao Vivo
Mapa de Fluxo
Editar · JSON

Formato de dados

{ from, to, weight } · [from, to, weight] (from/to: id do ponto ou [lon,lat])

Estrutura de dados

O JSON que você passa dentro do gráfico — coloque direto na sua series.

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

Exemplo

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]
      ]
    }
  ]
});

Opções específicas do tipo

OpçãoDescrição
from / toExtremos: id de um mappoint ou par [lon, lat].
weightMagnitude relativa da ligação → espessura da faixa.
widthLargura máxima da faixa em pixels.
curveFactorCurvatura lateral da faixa (padrão 0.3).
fillOpacityOpacidade do preenchimento da faixa.

Common errors

Why does my mapa de fluxo 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 fluxo chart in JavaScript?
Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'flowmap' }, series: [...] }).
Why does my mapa de fluxo 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.
Opções comuns (color, visible, marker, dataLabels, animation, events, zones…) se aplicam a cada tipo — veja Configuração → series. Veja renderizado na galeria.