highcharts / map-collection-dist

Other
29 stars 37 forks source link

I can't connect the map from the collection. #53

Closed MichaelKheel closed 4 years ago

MichaelKheel commented 4 years ago

Before creating the issue, I tried all the various options that I found, nothing helped.

import React from 'react';

import Highcharts from "highcharts/highmaps";
import HighchartsReact from 'highcharts-react-official';
import MapRU from '@highcharts/map-collection/countries/ru/ru-all';

const options = {
    /*chart: {
        map: MapRU,
    },*/

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },

    exporting: {
        enabled: false,
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 100
    },

    tooltip: {
    borderWidth: 0,
        backgroundColor:"rgba(255,255,255,0)",
        borderRadius: 0,
    padding: 8,
        shared: true,
    shadow: false,
        useHTML: true,
    formatter: function() {
            return (this.key);
        },
        valueDecimals: 2
    },

    series: [{
    mapData: MapRU,
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }, {
        dataLabels: {
            useHTML: true,
            style: {
                fontSize: '14px'
            }
        },
    showInLegend: false,
    type: 'mappoint',
        data: [{}]
    }]
};

export default () => {
    return(
        <HighchartsReact
            options={options}
            highcharts={Highcharts}
            constructorType={'mapChart'}
        />
    );
}
react-dom.development.js:13035 Uncaught ReferenceError: Highcharts is not defined
    at eval (ru-all.js:1)
    at Object../node_modules/@highcharts/map-collection/countries/ru/ru-all.js (vendors-node_modules_highcharts_map-collection_countries_ru_ru-all_js-node_modules_highcharts-ac52e2.bundle.js:20)
    at __webpack_require__ (main.bundle.js:5219)
    at eval (geomap.js:11)
    at Module../src/pages/geomap.js (src_pages_geomap_js.bundle.js:22)
    at Function.__webpack_require__ (main.bundle.js:5219)
MichaelKheel commented 4 years ago

Found a solution, it was necessary to use XXX.geo.json