Карта Highcharts с React TypeScript

Question

Я пытаюсь написать пример WorldMap с TypeScript, и у меня есть проблемы с сериями внутри Highcharts Options:

(Highcharts, Highstock, Highmaps, Gantt) Series options for specific data and the data itself. In TypeScript you have to cast the series options to specific series types, to get all possible options for a series.

Похоже, series требует type: 'map' но я попробовал это, и это не сработало. Я также просмотрел примеры и ответы в Интернете ( 1 , 2 , 3 , 4 ), но они работают только для React в jsx не tsx.

import * as React from 'react';
import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';

const options: Highcharts.Options = {
    title: {
        text: 'My chart'
    },
    series: [
        {
          mapData: mapDataWorld,
        //   data: data,
          name: "USA",
          dataLabels: {
            enabled: true,
            format: "{point.name}"
          }
        }
    ],
}

export default function HighchartsTest(props: HighchartsReact.Props) {
    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
                {...props}
            />
        </div>
    )
}

Answer 1

Я обнаружил некоторые проблемы в вашей попытке.

1. Модуль карты не импортирован (в данном случае, высокие карты).

2. Отсутствует тип constructorType в

   constructorType={'mapChart'}
   

А вот демо: https://stackblitz.com/edit/react-ts-zs69rw?file=index.tsx

Обратите внимание, что тип должен быть определен, а также массив данных должен иметь определенные типы. Я думаю, что проблема возникла в вашем случае из-за отсутствия модулей.