highmaps

highmaps get country name on click event

有些话、适合烂在心里 — Sat, 18 Jul 2020 08:59:26 +0000

highmaps get country name on click event 有些话、适合烂在心里 2020-07-18 16:59:26

问题

$('#container').highcharts('Map', {

        title : {
            text : 'Highmaps basic demo'
        },

        subtitle : {
            text : 'Source map: <a href="http://code.highcharts.com/mapdata/custom/africa.js">Africa</a>'
        },

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

        colorAxis: {
            min: 0
        },

        series : [{
            data : data,
            mapData: Highcharts.maps['custom/africa'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
});

http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/africa I am using this fiddle and I want to get the country name on click event on the country. Anybody can help me with the example or link to the API of this? I read the API but could not find, I guess I am missing some point. thanks in advance

回答1:

Pretty simple, just add this:

    plotOptions:{
        series:{
            point:{
                events:{
                    click: function(){
                        alert(this.name);
                    }
                }
            }
        }
    }

The this in the point scope represents the clicked point, therfore you have access to it's properties.

http://jsfiddle.net/farz5vq2/

来源：https://stackoverflow.com/questions/33312551/highmaps-get-country-name-on-click-event

标签

onclick

highmaps

Highmaps chart is empty in Angular 5

不问归期 — Wed, 15 Jan 2020 23:33:00 +0000

Highmaps chart is empty in Angular 5 不问归期 2020-01-16 07:33:00

问题

I have a component where I have to show high maps. No errors but the maps is always empty

My chart options object :

let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
this.chartConfigObject = new MapChart(<any>{
            chart: {
                borderWidth: 1,
                map: 'custom/world'
            },

            title: {
                text: 'World population 2013 by country'
            },

            subtitle: {
                text: 'Demo of Highcharts map with bubbles'
            },

            legend: {
                enabled: false
            },

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

            series: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['iso-a3', 'code3'],
                data: chartData,
                map: mapData,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
                }
            }]
        });

When I console the created MapChart object i am getting the series as null always.

What am i missing and why the maps series is always null?

I am using angular-highcharts component as explained here : https://github.com/cebor/angular-highcharts

reproduced in stackblitz: https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts

回答1:

You are not providing the map data to your chart , so it doesn't know which map to show. Try showing the map data like mapData: Highcharts.maps['custom/world'] under Series.

If you cannot access the maps in your Highcharts reference , try importing all the maps (JS files) from the HighMaps library into your project and reference them in your typescript component file like this:

const Highcharts = {maps: {}};
require('../../../assets/maps')(Highcharts); //your custom project path

and use mapData: Highcharts['maps']['custom/world'] or whatever is the map you wanted to use like 'countries/us/us-all'

Below is working map code using angular-highcharts to plot the map and points on it:

getMap(data) {        
        return new MapChart({
            chart: {    
                    events: {
                    load: function (point) {
                        //do something here on page load
                    }
                },            
                spacingBottom: 20
                backgroundColor: '#FFF',
                style: {fontFamily: 'inherit'}
            },
            title: {
                text: ''
            },
            mapNavigation: {
                enabled: true
            },
            tooltip: {
                headerFormat: '',
                formatter: function () {
                    var toolTipTxt = '<b>' + this.point.options.name + '</b>';                    
                    return toolTipTxt;
                }
            },
            plotOptions: {
                series: {
                    color: '#00A778',
                    marker: {
                        radius: 6,
                        symbol: 'circle',
                        lineColor: '#00A778',
                        lineWidth: 1,
                        states: {
                            select: {
                                fillColor: '#00A778',
                                lineWidth: 1,
                                lineColor: '#00A778'
                            }
                        }
                    },
                    point: {
                        events: {
                            click: function () {
                                this.select(null, true);
                            }
                        }
                    }                 
                }
            },
            series: [
                {
                    //mapData: Highcharts['maps']['custom/world']
                    mapData: Highcharts.maps['custom/world'], 
                    name: 'Basemap',
                    borderColor: '#A0A0A0',
                    nullColor: 'rgba(200, 200, 200, 0.3)',
                    showInLegend: false,
                    data: []
                },
                {
                    // Specify points using lat/lon
                    type: 'mappoint',
                    name: 'MySites',
                    data: data
                }                
            ]
        });
    }

Also you need proj4js library to plot points on the map, in case if that's your requirement as well.

Hope this helps !

回答2:

Might, it can be useful.

Here is the solution for angular-highcharts:

1) Download the map from collection: https://code.highcharts.com/mapdata/

2) Create a variable that equals to the content of this file and export it:

instead of

Highcharts.maps["custom/world"] = { ... content of the file ... }

use

const worldMap = { ... content of the file ... }
export default worldMap;

2) Import this map to your component (for world-map.ts):

import worldMap from './world-map';

3) use

chart: {
  ...
  map: worldMap,
  ...
},

And, of course, don't forget to add a couple of lines to your module:

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highmaps from 'highcharts/modules/map.src';

@NgModule({
  ...
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [highmaps] }
  ],
  ...
})

About modules: https://www.npmjs.com/package/angular-highcharts#highmaps

Here is the working example: https://stackblitz.com/edit/angular-highcharts-stock-byjo6a

Solution was found here: https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/

来源：https://stackoverflow.com/questions/49600548/highmaps-chart-is-empty-in-angular-5

标签

Highmaps chart is empty in Angular 5

北城以北 — Wed, 15 Jan 2020 23:32:21 +0000

Highmaps chart is empty in Angular 5 北城以北 2020-01-16 07:32:21

问题

I have a component where I have to show high maps. No errors but the maps is always empty

My chart options object :

let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
this.chartConfigObject = new MapChart(<any>{
            chart: {
                borderWidth: 1,
                map: 'custom/world'
            },

            title: {
                text: 'World population 2013 by country'
            },

            subtitle: {
                text: 'Demo of Highcharts map with bubbles'
            },

            legend: {
                enabled: false
            },

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

            series: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['iso-a3', 'code3'],
                data: chartData,
                map: mapData,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
                }
            }]
        });

When I console the created MapChart object i am getting the series as null always.

What am i missing and why the maps series is always null?

I am using angular-highcharts component as explained here : https://github.com/cebor/angular-highcharts

reproduced in stackblitz: https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts

回答1:

You are not providing the map data to your chart , so it doesn't know which map to show. Try showing the map data like mapData: Highcharts.maps['custom/world'] under Series.

const Highcharts = {maps: {}};
require('../../../assets/maps')(Highcharts); //your custom project path

and use mapData: Highcharts['maps']['custom/world'] or whatever is the map you wanted to use like 'countries/us/us-all'

Below is working map code using angular-highcharts to plot the map and points on it:

getMap(data) {        
        return new MapChart({
            chart: {    
                    events: {
                    load: function (point) {
                        //do something here on page load
                    }
                },            
                spacingBottom: 20
                backgroundColor: '#FFF',
                style: {fontFamily: 'inherit'}
            },
            title: {
                text: ''
            },
            mapNavigation: {
                enabled: true
            },
            tooltip: {
                headerFormat: '',
                formatter: function () {
                    var toolTipTxt = '<b>' + this.point.options.name + '</b>';                    
                    return toolTipTxt;
                }
            },
            plotOptions: {
                series: {
                    color: '#00A778',
                    marker: {
                        radius: 6,
                        symbol: 'circle',
                        lineColor: '#00A778',
                        lineWidth: 1,
                        states: {
                            select: {
                                fillColor: '#00A778',
                                lineWidth: 1,
                                lineColor: '#00A778'
                            }
                        }
                    },
                    point: {
                        events: {
                            click: function () {
                                this.select(null, true);
                            }
                        }
                    }                 
                }
            },
            series: [
                {
                    //mapData: Highcharts['maps']['custom/world']
                    mapData: Highcharts.maps['custom/world'], 
                    name: 'Basemap',
                    borderColor: '#A0A0A0',
                    nullColor: 'rgba(200, 200, 200, 0.3)',
                    showInLegend: false,
                    data: []
                },
                {
                    // Specify points using lat/lon
                    type: 'mappoint',
                    name: 'MySites',
                    data: data
                }                
            ]
        });
    }

Also you need proj4js library to plot points on the map, in case if that's your requirement as well.

Hope this helps !

回答2:

Might, it can be useful.

Here is the solution for angular-highcharts:

1) Download the map from collection: https://code.highcharts.com/mapdata/

2) Create a variable that equals to the content of this file and export it:

instead of

Highcharts.maps["custom/world"] = { ... content of the file ... }

use

const worldMap = { ... content of the file ... }
export default worldMap;

2) Import this map to your component (for world-map.ts):

import worldMap from './world-map';

3) use

chart: {
  ...
  map: worldMap,
  ...
},

And, of course, don't forget to add a couple of lines to your module:

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highmaps from 'highcharts/modules/map.src';

@NgModule({
  ...
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [highmaps] }
  ],
  ...
})

About modules: https://www.npmjs.com/package/angular-highcharts#highmaps

Here is the working example: https://stackblitz.com/edit/angular-highcharts-stock-byjo6a

Solution was found here: https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/

来源：https://stackoverflow.com/questions/49600548/highmaps-chart-is-empty-in-angular-5

标签

Highcharts: Highmaps - Choropleth maps - All states are the same color

戏子无情 — Wed, 15 Jan 2020 18:06:24 +0000

Highcharts: Highmaps - Choropleth maps - All states are the same color 戏子无情 2020-01-16 02:06:24

问题

I have copied the demo code for the United States color axis map from the Highcharts website and substituted my own JSon file of values. The values are showing up in the tooltip and the legend has color gradients and values, but the states are all one medium blue color. The file values range from a few hundred to almost $4 million dollars for the states. This html page is being called in MVC5.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
    <script>


    $(function () {
    $.getJSON('/HighChart/GetStates', function (data) {
    // Make codes uppercase to match the map data
    $.each(data, function () {
    this.State = this.State.toUpperCase();
    });

    // Instanciate the map
    $('#container').highcharts('Map', {

    chart : {
    borderWidth : 1
    },

    title : {
    text : 'Sales per State'
    },

    legend: {
    layout: 'horizontal',
    borderWidth: 0,
    backgroundColor: 'rgba(255,255,255,0.85)',
    floating: true,
    verticalAlign: 'top',
    y: 25
    },

    mapNavigation: {
    enabled: true
    },

    colorAxis: {
        min: 1,
        max: 5000000,
    type: 'logarithmic',
    minColor: '#EEEEFF',
    maxColor: '#000022',
    stops: [
    [0, '#EFEFFF'],
    [.67, '#4444FF'],
    [1, '#000022']
    ]
    },

    series : [{
    animation: {
    duration: 1000
    },
    data : data,
    mapData: Highcharts.maps['countries/us/us-all'],
    joinBy: ['postal-code', 'State'],
    dataLabels: {
    enabled: true,
    color: '#FFFFFF',
    format: '{point.State}'
     },
    name: 'Total Sales',
    tooltip: {
    pointFormat: '{point.State}: {point.TotalSales}'
    }
    }]
    });
    });
    });
    </script>
    <title>Map</title>

</head>
<body>
    <div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
    <p>
        <a href="javascript:void(0);" onclick="history.go(-1);">Return</a>

    </p>
</body>
</html>

My Json file is as follows:

[
{"Year":2015,"State":"","TotalQuantity":1318,"TotalSales":0.0000,"IsDistributor":0},
{"Year":2015,"State":"AK","TotalQuantity":19,"TotalSales":4745.6900,"IsDistributor":0},
{"Year":2015,"State":"AL","TotalQuantity":148,"TotalSales":38313.9300,"IsDistributor":0},
{"Year":2015,"State":"AR","TotalQuantity":11,"TotalSales":1610.9500,"IsDistributor":0},
{"Year":2015,"State":"AZ","TotalQuantity":154,"TotalSales":42988.8000,"IsDistributor":0},
{"Year":2015,"State":"CA","TotalQuantity":3640,"TotalSales":1634505.3344,"IsDistributor":0},
{"Year":2015,"State":"CO","TotalQuantity":6200,"TotalSales":3863600.7213,"IsDistributor":0},
{"Year":2015,"State":"CT","TotalQuantity":2240,"TotalSales":400435.9686,"IsDistributor":0},
{"Year":2015,"State":"DE","TotalQuantity":4328,"TotalSales":1236465.4315,"IsDistributor":0},
{"Year":2015,"State":"FL","TotalQuantity":3689,"TotalSales":674759.7803,"IsDistributor":0},
{"Year":2015,"State":"GA","TotalQuantity":3182,"TotalSales":795062.7901,"IsDistributor":0},
{"Year":2015,"State":"HI","TotalQuantity":17,"TotalSales":21887.0000,"IsDistributor":0},
{"Year":2015,"State":"IA","TotalQuantity":227,"TotalSales":58511.3800,"IsDistributor":0},
{"Year":2015,"State":"ID","TotalQuantity":199,"TotalSales":64104.1200,"IsDistributor":0},
{"Year":2015,"State":"IL","TotalQuantity":1356,"TotalSales":481361.1978,"IsDistributor":0},
{"Year":2015,"State":"IN","TotalQuantity":2027,"TotalSales":532739.3100,"IsDistributor":0},
{"Year":2015,"State":"KS","TotalQuantity":940,"TotalSales":216844.0900,"IsDistributor":0},
{"Year":2015,"State":"KY","TotalQuantity":511,"TotalSales":136370.9100,"IsDistributor":0},
{"Year":2015,"State":"LA","TotalQuantity":35,"TotalSales":9926.0500,"IsDistributor":0},
{"Year":2015,"State":"MA","TotalQuantity":4638,"TotalSales":2262278.2147,"IsDistributor":0},
{"Year":2015,"State":"MD","TotalQuantity":4116,"TotalSales":1119331.7664,"IsDistributor":0},
{"Year":2015,"State":"ME","TotalQuantity":1725,"TotalSales":256750.5322,"IsDistributor":0},
{"Year":2015,"State":"MI","TotalQuantity":2837,"TotalSales":785167.4863,"IsDistributor":0},
{"Year":2015,"State":"MN","TotalQuantity":19396,"TotalSales":6560988.9155,"IsDistributor":0},
{"Year":2015,"State":"MO","TotalQuantity":239,"TotalSales":45533.1359,"IsDistributor":0},
{"Year":2015,"State":"MS","TotalQuantity":4,"TotalSales":920.8000,"IsDistributor":0},
{"Year":2015,"State":"MT","TotalQuantity":41,"TotalSales":14209.1000,"IsDistributor":0},
{"Year":2015,"State":"NC","TotalQuantity":5506,"TotalSales":1679007.6369,"IsDistributor":0},
{"Year":2015,"State":"ND","TotalQuantity":5,"TotalSales":883.0000,"IsDistributor":0},
{"Year":2015,"State":"NE","TotalQuantity":49,"TotalSales":12603.4600,"IsDistributor":0},
{"Year":2015,"State":"NH","TotalQuantity":2661,"TotalSales":656975.7190,"IsDistributor":0},
{"Year":2015,"State":"NJ","TotalQuantity":4899,"TotalSales":1857249.7522,"IsDistributor":0},
{"Year":2015,"State":"NM","TotalQuantity":18,"TotalSales":847.1700,"IsDistributor":0},
{"Year":2015,"State":"NV","TotalQuantity":2,"TotalSales":75.0000,"IsDistributor":0},
{"Year":2015,"State":"NY","TotalQuantity":805,"TotalSales":295242.2600,"IsDistributor":0},
{"Year":2015,"State":"OH","TotalQuantity":1712,"TotalSales":533413.1700,"IsDistributor":0},
{"Year":2015,"State":"OR","TotalQuantity":3377,"TotalSales":1164709.0624,"IsDistributor":0},
{"Year":2015,"State":"PA","TotalQuantity":2292,"TotalSales":601890.9000,"IsDistributor":0},
{"Year":2015,"State":"PR","TotalQuantity":2,"TotalSales":115.5000,"IsDistributor":0},
{"Year":2015,"State":"SC","TotalQuantity":2453,"TotalSales":1059821.3817,"IsDistributor":0},
{"Year":2015,"State":"SD","TotalQuantity":250,"TotalSales":84275.1400,"IsDistributor":0},
{"Year":2015,"State":"TN","TotalQuantity":2056,"TotalSales":609389.7013,"IsDistributor":0},
{"Year":2015,"State":"TX","TotalQuantity":1917,"TotalSales":710662.2750,"IsDistributor":0},
{"Year":2015,"State":"UT","TotalQuantity":6416,"TotalSales":1154119.6931,"IsDistributor":0},
{"Year":2015,"State":"VA","TotalQuantity":3021,"TotalSales":479353.2296,"IsDistributor":0},
{"Year":2015,"State":"VT","TotalQuantity":402,"TotalSales":129859.0000,"IsDistributor":0},
{"Year":2015,"State":"WA","TotalQuantity":842,"TotalSales":238343.3901,"IsDistributor":0},
{"Year":2015,"State":"WI","TotalQuantity":12861,"TotalSales":3228575.1303,"IsDistributor":0},
{"Year":2015,"State":"WV","TotalQuantity":1651,"TotalSales":291851.3200,"IsDistributor":0},
{"Year":2015,"State":"WY","TotalQuantity":72,"TotalSales":29821.2600,"IsDistributor":0}]

回答1:

value property in your JSON is not set. Your tooltip works, because you changed it's format, but you didn't set any values (in Highcharts terms) for points. Try this:

data: data.map(function(el) { 
  el.value = el.TotalSales; 
  return el;
});

来源：https://stackoverflow.com/questions/35186586/highcharts-highmaps-choropleth-maps-all-states-are-the-same-color

标签

How use joinBy with subregion in France with HighMaps?

穿精又带淫゛_ — Mon, 06 Jan 2020 20:22:09 +0000

How use joinBy with subregion in France with HighMaps? 穿精又带淫゛_ 2020-01-07 04:22:09

问题

I'm trying to update this example for HighMaps :

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
    ['fr-e-mb', 0],
    ['fr-r-vd', 1],
    ['fr-k-ad', 2],
    ['fr-u-vc', 3],
    ['fr-g-hm', 4],
    ['fr-g-mr', 5],
    ['fr-o-no', 6],
    ['fr-n-hp', 7],
    ['fr-f-in', 8],
    ['fr-t-vn', 9],
    ['fr-b-dd', 10],
    ['fr-t-cm', 11],
    ['fr-u-am', 12],
    ['fr-u-vr', 13],
    ['fr-u-ap', 14],
    ['fr-v-ai', 15],
    ['fr-s-as', 16],
    ['fr-u-bd', 17],
    ['fr-n-av', 18],
    ['fr-k-ga', 19],
    ['fr-g-ab', 20],
    ['fr-d-co', 21],
    ['fr-d-sl', 22],
    ['fr-f-ch', 23],
    ['fr-l-cr', 24],
    ['fr-r-ml', 25],
    ['fr-t-ds', 26],
    ['fr-t-ct', 27],
    ['fr-v-dm', 28],
    ['fr-v-ah', 29],
    ['fr-q-eu', 30],
    ['fr-j-es', 31],
    ['fr-f-el', 32],
    ['fr-n-hg', 33],
    ['fr-j-hd', 34],
    ['fr-l-hv', 35],
    ['fr-r-st', 36],
    ['fr-f-il', 37],
    ['fr-v-is', 38],
    ['fr-i-ju', 39],
    ['fr-i-hn', 40],
    ['fr-v-lr', 41],
    ['fr-n-tg', 42],
    ['fr-n-lo', 43],
    ['fr-b-lg', 44],
    ['fr-k-lz', 45],
    ['fr-e-iv', 46],
    ['fr-m-mm', 47],
    ['fr-m-ms', 48],
    ['fr-d-ni', 49],
    ['fr-l-cz', 50],
    ['fr-c-pd', 51],
    ['fr-n-ge', 52],
    ['fr-b-pa', 53],
    ['fr-v-sv', 54],
    ['fr-j-se', 55],
    ['fr-j-vp', 56],
    ['fr-j-ss', 57],
    ['fr-j-vm', 58],
    ['fr-s-so', 59],
    ['fr-i-tb', 60],
    ['fr-i-db', 61],
    ['fr-j-vo', 62],
    ['fr-m-vg', 63],
    ['fr-j-yv', 64],
    ['fr-f-lc', 65],
    ['fr-h-cs', 66],
    ['fr-e-fi', 67],
    ['fr-h-hc', 68],
    ['fr-p-mh', 69],
    ['fr-g-an', 70],
    ['fr-n-ag', 71],
    ['fr-a-br', 72],
    ['fr-p-cv', 73],
    ['fr-c-cl', 74],
    ['fr-e-ca', 75],
    ['fr-b-gi', 76],
    ['fr-a-hr', 77],
    ['fr-v-hs', 78],
    ['fr-k-he', 79],
    ['fr-b-ld', 80],
    ['fr-r-la', 81],
    ['fr-m-mo', 82],
    ['fr-p-or', 83],
    ['fr-o-pc', 84],
    ['fr-k-po', 85],
    ['fr-r-my', 86],
    ['fr-q-sm', 87],
    ['fr-d-yo', 88],
    ['fr-c-al', 89],
    ['fr-c-hl', 90],
    ['fr-u-ha', 91],
    ['fr-f-lt', 92],
    ['fr-s-oi', 93],
    ['fr-v-rh', 94],
    ['fr-n-ta', 95],
    ['undefined', 96],
    ['fr-re-re', 97],
    ['fr-yt-yt', 98],
    ['fr-gf-gf', 99],
    ['fr-mq-mq', 100],
    ['fr-gp-gp', 101],
    ['undefined', 102]
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/fr/fr-all-all'
    },

    title: {
        text: 'Highmaps basic demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/fr/fr-all-all.js">France, admin2</a>'
    },

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

    colorAxis: {
        min: 0
    },

    series: [{
        data: data,
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }, {
            name: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/fr/fr-all-all'], 'mapline'),
            color: 'silver',
            showInLegend: false,
            enableMouseTracking: false
        }]
});

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/fr/fr-all-all.js"></script>

<div id="container"></div>

Into my purpose:

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
    ['Bas-Rhin', 1000]
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/fr/fr-all-all'
    },

    title: {
        text: 'Highmaps basic demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/fr/fr-all-all.js">France, admin2</a>'
    },

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

    colorAxis: {
        min: 0
    },

    series: [{
        data: data,
        joinBy: 'name',
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/fr/fr-all-all.js"></script>

<div id="container"></div>

I would like to join the data with the name of french department.

I don't get the trouble. I saw other example like this one http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/accessibility/accessible-map/ or according to the offical document, we can use other parameter to join our data and the HighMaps mapdata.

A also try with this json object for data but it didn't work neither :

[{"dpt":"Bas-Rhin", "value":"1000"}]

回答1:

In the joinBy you need to declare the mapping fields. Replace your data with array of objects, define a name and combine with name in a source file.

joinBy: ['name', 'code'],

Example:

http://jsfiddle.net/5ejzk2w7

来源：https://stackoverflow.com/questions/44715083/how-use-joinby-with-subregion-in-france-with-highmaps

标签

Highcharts

highmaps

How to make multiple charts using highcharts in a loop?

南笙酒味 — Mon, 06 Jan 2020 17:49:17 +0000

How to make multiple charts using highcharts in a loop? 南笙酒味 2020-01-07 01:49:17

问题

This is the relevant code I have:

        <script>
            titles = <?php echo json_encode($graphTitles)?>;
            //Loop through the graphs
            for (var graphNO = 0; graphNO < titles.length; graphNO++)
            {                               
               //CREATE NEW CONTAINER
                var container = document.createElement('div'); 
                document.body.appendChild(container);er);

                dates = <?php echo json_encode($recivedDates);?>[titles[graphNO]];
                //I EXTRACT A FEW  MORE ARRAYS THE SAME METHOD
              $(function () 
                {
                  $(container).highcharts({
                      title: {
                          text: titles[graphNO]
                      },
                      xAxis: {
                          categories: dates
                      },
                      series: [{
                          type: 'column',
                          color: 'gold',
                          name: 'Created Issues',
                          data: createdIssues.map(Number)
                      }, 
                       //MORE COLUMN'S AND SOME SPLINES. IT ALL WORKS AS EXPECTED
                  });
                });
            }
        </script>

I didn't want to post all the code and just make it messy, what I expected this code to do is:

graphNO has the value of 2, I thought it would loop through twice (which it does), make a container for each loop (which it does), then draw a different graph for each loop it does in the container it just made (but instead it just draws the second graph).

I don't know whats wrong, but any ideas on how to fix this, or any ideas on how to make multiple graphs in a loop would be great help.

Also, this is the first site I'm making so I haven't used javascript, php, or html for more then a day, so sorry if it's really obvious, I couldn't find anything on this though.

回答1:

I got it, after a day of trying complex stuff from around the web that didn't work, I ended up thinking what will happen if I remove the function so rather then:

             $(function () 
            {
              $(container).highcharts({
                  title: {

I just have:

              $(container).highcharts({
                  title: {

And it all worked perfectly. I don't know why, probably because of how jquery deals with functions, I don't know, I didn't even know what I was using was jquery till an hour ago. But it works if anyone ever wants to do something similar, it works, and feel free to tell me why.

回答2:

The answer by Swikrit Khanal does work, because the function is no longer being over written. When you have it all wrapped in the function, that function will overwrite it's self when it builds the next graph, so you will only be left with the last graph.

Bellow is a way to use a loop and build multiple graphs without removing the function, but rather uniquely name it.

for(v=0; v < 5; v++){
 var container = "#container"+v;
 var func_name = "container"+v;
 func_name = function () {
   $(container).highcharts({
   })
 }
func_name()
}

来源：https://stackoverflow.com/questions/34938338/how-to-make-multiple-charts-using-highcharts-in-a-loop

标签

How to zoom to specific point in Highmaps

為{幸葍}努か — Sun, 22 Dec 2019 02:24:03 +0000

How to zoom to specific point in Highmaps 為{幸葍}努か 2019-12-22 10:24:03

问题

Highmaps / highcharts is a javascript/jquery adapter that renders maps in browsers etc.

I have a map with a single country highlighted, however, the scale of the (world) map is such that I want zoom in after the map is loaded on the country in question.

Looking at the API I feel certain this is possible.

There is an event listener, such that I can execute custom functions on load. As illustrated with this example, where a series is added on load (Js fiddle)

Additionally there is a method mapZoom allowing you to specify a point to zoom to with the following arguments:

mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])

But when I try and call this method onload (my code attempt below, JS fiddle here), nothing happens.

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {

        // Assign id's
        $.each(data, function () {
            this.id = this.code;
        });

        // Initiate the chart
        $('#container').highcharts('Map', {
            chart: {
                events: {
                    load: function () {
                    mapZoom(0.5, 100, 100);
                    }
                }
            },
            title: {
                text: 'Zoom on load attempt'
            },


            legend: {
                title: {
                    text: 'Population density per km²'
                }
            },

            colorAxis: {
                min: 1,
                max: 1000,
                type: 'logarithmic'
            },

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

            series : [{
                data : data,
                mapData: Highcharts.maps['custom/world-highres'],
                joinBy: ['iso-a2', 'code'],
                name: 'Population density',
                allowPointSelect: true,
                cursor: 'pointer',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                tooltip: {
                    pointFormat: '{point.id} {point.name}',
                    valueSuffix: '/km²'
                }
            }]
        });

    });
});

回答1:

mapZoom is a method that belongs to the chart object so, in order to call it as en event (load), you have to call it using this keyword.

You can edit your code like this (JSFiddle):

...
events: {
    load: function () {
        this.mapZoom(0.5, 100, 100);
        }
    }
}
...

Alternatively, you can call it whenever you want using a jQuery reference (JSFiddle):

$('#container').highcharts().mapZoom(0.5, 100, 100);

回答2:

Zoom to a specific country on your map is easy

series : [{
            ...
            data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
            ...
            }

...and then...

var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well

回答3:

If you want to zoom several countries, than you can try this

events: {
    load: function () {
    var mapChart = this;
    ['DE', 'HU', 'RO'].map(function(code){
        return mapChart.get(code);
    }).reduce(function(acc, current){
      // Set map bounds
      acc._minX = Math.min(acc._minX, current._minX);
      acc._maxX = Math.max(acc._maxX, current._maxX);
      acc._minY = Math.min(acc._minY, current._minY);
      acc._maxY = Math.max(acc._maxY, current._maxY);
      return acc;
    }).zoomTo(); 
 }}

来源：https://stackoverflow.com/questions/28933713/how-to-zoom-to-specific-point-in-highmaps

标签

javascript

Highcharts

highmaps

Highmaps IOS click events not firing

痞子三分冷 — Wed, 11 Dec 2019 07:50:54 +0000

Highmaps IOS click events not firing 痞子三分冷 2019-12-11 15:50:54

问题

I'm building an interactive map web-app using Highmaps and Highcharts. There's a work in progress version of it here: http://s3.eu-west-2.amazonaws.com/ds-active-travel/index.html

It works fine on Desktop browsers (IE, Firefox, Chrome, Safari) however the click events don't seem to be firing when I click the map on an IOS mobile device regardless of the browser (Safari, Firefox, Chrome).

Interestingly when I use the dropdowns to select a node, it works fine. I've tried replacing the anonymous functions embedded within the map to the dropdown functions but this doesn't see to work.

Does anyone have any ideas what's causing this?

Edit. Code for the map

function buildMap (container,mapData,mapApiData,mapColor,mapTitle) {

    var map = Highcharts.mapChart(container, {

        chart: {
            style : {
                fontFamily: 'Roboto, sans-serif',
            },
            pinchType: 'xy'
        },

        credits : {
            enabled: false
        },

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

        colorAxis: {
            tickPixelInterval: 100,
            // minColor: "#ffffff",
            maxColor: mapColor
        },

        title: {
            text: mapTitle,
            style: {
                fontSize: 16,
                weight: 'bold'
            }
        },

        tooltip : {
            enabled: true,
            headerFormat: '',
            backgroundColor: "rgba(0,0,0,0.6)",
            borderWidth: 0,
            borderRadius: 0,
            shadow: false,
            hideDelay: 1500,
            style : {
                color: 'white',
                fontSize: '16px',
                lineHeight: 20
            }
        },

        plotOptions: {
            series : {
                allowPointSelect: true
            }
        },

        series: [{
            data: mapApiData[0].record.data,
            mapData: mapData,
            joinBy: ['CODE',0],
            keys: ['CODE', 'value'],
            name: 'Random data',
            animation: true,
            events: {
                click: function (e) {
                    renderCharts.fromMap(e);    
                },
            },
            states: {
                select: {
                    color: '#00ff1a'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal}'
            },

            borderWidth: 0
        }]
    });

    return map;

}

来源：https://stackoverflow.com/questions/48191369/highmaps-ios-click-events-not-firing

标签

How to bind to Highcharts constructor/listen to CustomEvents from Vue component

蓝咒 — Wed, 11 Dec 2019 00:51:51 +0000

How to bind to Highcharts constructor/listen to CustomEvents from Vue component 蓝咒 2019-12-11 08:51:51

问题

This map exists inside of a Vue component and what I'm trying to do is use

this.$emit('somethingHappened', HighmapsEventObject)

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 

          in here 

        }
      } 
    }]
  })
}

as in

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 

          `this.$emit('somethingHappened', HighmapsEventObject)`

        }
      } 
    }]
  })
}

But obviously, this at this point, references the Highmap's this not the Vue component's this

so I've tried to do something like this:

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 

          this.$emit('somethingHappened', e)

        }
      } 
    }]
  }).bind(this)
}

But I get:

... default.a.mapChart(...).bind is not a function

and I can't figure out how to pass the Vue component's this to the highmaps constructor and Vue doesn't naturally listen to CustomEvents so I can't figure out how to dispatch the event in that callback so that Vue is aware that it happened.

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 
          let event = new CustomEvent('mapclicked', {
            detail: e
          })
          e.target.dispatch(event)
        }
      } 
    }]
  })
}

So my question, at long last, is how do I either a: listen for CustomEvents in Vue, or b: bind Vue's this to a Highmaps constructor?

Thanks SO

回答1:

3 options as far as i can see, you can use the infamous "that" variable

mounted () {
  const that = this;
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
          that.$emit('somethingHappened', HighmapsEventObject)
        }
      } 
    }]
  })
}

you can create a function directly:

mounted () {
  const something = (HighmapsEventObject) => { this.$emit('somethingHappened', HighmapsEventObject); };
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
           something(HighmapsEventObject);
        }
      } 
    }]
  })
}

Or you can use an event bus https://alligator.io/vuejs/global-event-bus/ but that sounds like an overkill.

Finally you can try (if you aren't already) the highchart vue plugin: https://github.com/weizhenye/vue-highcharts

来源：https://stackoverflow.com/questions/43824976/how-to-bind-to-highcharts-constructor-listen-to-customevents-from-vue-component

标签

How can I get around “mixed active content” highcharts exporting error?

徘徊边缘 — Tue, 10 Dec 2019 17:06:54 +0000

How can I get around “mixed active content” highcharts exporting error? 徘徊边缘 2019-12-11 01:06:54

问题

It appears you cannot use Exporting with https, because of "mixed active content" error.

Blocked loading mixed active content "http://export.highcharts.com/"

You can see this problem by viewing one of the Highmaps demos:

This (http) works: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/distribution/

This (https) doesn't: https://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/distribution/

Is there any way to allow Exporting to work with an https page?

回答1:

The exporting URL defaults to 'http://export.highcharts.com'. You can manually set it to use https for the same address.

In code (updated JSFiddle):

exporting: {
    url: 'https://export.highcharts.com'
}

来源：https://stackoverflow.com/questions/35538500/how-can-i-get-around-mixed-active-content-highcharts-exporting-error