Карта округов США в Highmaps для ошибки компиляции угловых бросков

Question

Я пытаюсь развернуть карту округов США в Highmaps с помощью директивы highcharts-chart. Это прекрасно работает с картой штатов США, но у меня возникла проблема с определением элемента данных для округов США, поскольку я получаю ошибку компиляции.

Это попытка:

HTML

    <highcharts-chart 
        [Highcharts]="Highcharts"
        [constructorType]="'mapChart'"
        [options]="chartMap"
        [(update)]="updateFlag"
        [oneToOne]="true"
        style="width: 500px; height: 400px; display: block;"
    ></highcharts-chart>

Машинопись

import * as Highcharts from 'highcharts';
import MapModule from 'highcharts/modules/map';
const mapX = require('@highcharts/map-collection/countries/us/us-all-all.geo.json')
MapModule(Highcharts);

.....
.....
this.chartMap = {
                chart: {
                    map: mapX
                },
                title: {
                    text: 'THIS IS THE US COUNTIES MAP'
                },
                series: [{ // <-- error is thrown here
                    name: 'Unemployment',
                    borderWidth: 0.5,
                    states: {
                        hover: {
                        color: 'red'
                        }
                    },
                    joinBy: ['hc-key', 'code'],
                    data:  [  
                        {
                            "code": "us-al-001",
                            "name": "Autauga County, AL",
                            "value": 3.9
                        },
                        {
                            "code": "us-al-003",
                            "name": "Baldwin County, AL",
                            "value": 4.3
                        }
                    ]
                    }]
            };

Я получаю следующую ошибку компиляции:

Тип '{имя: строка; borderWidth: число; состояния: {hover: {цвет: строка; }; }; joinBy: string []; данные: {"код": строка; "название": строка; «значение»: число; } []; } 'нельзя назначить типу 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | СерияAreasplinerangeOptions | ... еще 82 ... | SeriesZigzagOptions. Свойство 'type' отсутствует в типе '{ имя: строка; borderWidth: число; состояния: {hover: {цвет: строка; }; }; joinBy: string []; данные: {"код": строка; «имя»: строка; «значение»: число; } []; } 'но требуется по типу 'SeriesXrangeOptions'.ts (2322) highcharts.d.ts (335083, 5):' type 'is объявлено здесь.

Я взял пример данных с здесь и пример карты с здесь .

Что это за ошибка и как ее исправить?

Answer 1

Эта ошибка возникает из-за того, что вы не установили серию type, которая требуется для каждой серии при использовании TypeScript.

series: [{
  name: 'Unemployment',
  type: 'map', // type is required for each series
  borderWidth: 0.5,
  states: {
    hover: {
      color: 'red'
    }
  },
  joinBy: ['hc-key', 'code'],
  data: [{
      "code": "us-al-001",
      "name": "Autauga County, AL",
      "value": 3.9
    },
    {
      "code": "us-al-003",
      "name": "Baldwin County, AL",
      "value": 4.3
    }
  ]
}]

Больше информации об этой проблеме:

• Как исправить "Свойство" type "отсутствует в типе, но требуется в типе" SeriesXrangeOptions "" в модуле угловых старших диаграмм
• https://github.com/highcharts/highcharts/issues/9867