时间戳

首页 > 解决方案 > 使用 React TypeScript 的 Highcharts 地图

javascript - 使用 React TypeScript 的 Highcharts 地图

问题描述

我正在尝试使用 TypeScript 编写WorldMap 示例，但我对 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），但它们仅适用于jsxnot中的 React 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>
    )
}

标签： javascriptreactjstypescripthighcharts

解决方案

我在您的尝试中发现了一些问题。

  1. 地图模块未导入（在本例中为 highmaps）。

  2. 缺少构造函数类型

    constructorType={'mapChart'}

这是一个演示：https ://stackblitz.com/edit/react-ts-zs69rw?file=index.tsx

请注意，必须定义类型，并且数据数组也需要定义类型。我认为您的问题是由于缺少模块而发生的。

推荐阅读