时间戳

首页 > 解决方案 > US Counties map in Highmaps for Angular throws compilation error

angular - US Counties map in Highmaps for Angular throws compilation error

问题描述

I'm trying to deploy US Counties map in Highmaps using the highcharts-chart directive. This works fine with the US States map, but have a problem defining the data element for US Counties as I get a compilation error.

This is the attempt:

HTML

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

Typescript

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

I get the following compilation error:

Type '{ name: string; borderWidth: number; states: { hover: { color: string; }; }; joinBy: string[]; data: { "code": string; "name": string; "value": number; }[]; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | SeriesAreasplinerangeOptions | ... 82 more ... | SeriesZigzagOptions'. Property 'type' is missing in type '{ name: string; borderWidth: number; states: { hover: { color: string; }; }; joinBy: string[]; data: { "code": string; "name": string; "value": number; }[]; }' but required in type 'SeriesXrangeOptions'.ts(2322) highcharts.d.ts(335083, 5): 'type' is declared here.

I took the data example from here and the map example from here.

What is this error and how to fix it?

标签： angularhighcharts

解决方案

This error occurs because you haven't set the series type which is required for each series when using 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
    }
  ]
}]

More information about this issue:

推荐阅读