首页 > 解决方案 > 使用类型时不显示Highmaps国家地图:“mappoint”

问题描述

我在 Highcharts 中处理印度地图演示,代码如下:

// Create the chart
Highcharts.mapChart('container', {
    chart: {
    //type:'mappoint',
        map: 'countries/in/custom/in-all-disputed'
    },

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

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/in/custom/in-all-disputed.js">India with disputed territories</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}'
        }
    }]
});

在我使用type: "mappoint". 我想使用mappoint类型来显示该国各州的积分。但使用此映射点类型。我的图表消失了,随机点显示在屏幕上。

您可以在我的小提琴中看到以下示例: https ://jsfiddle.net/abnitchauhan/5naocyqw/

标签: javascripthighcharts

解决方案


为了使用mappoint系列,您必须指定每个点的位置。
您可以通过指定纬度和经度来做到这一点。
请记住导入proj4js库以使用latand lon

 {
    type: 'mappoint',
    data: [{
      name: 'New Delhi',
      lat: 28.644800,
      lon: 77.216721
    }]
  }

演示: https ://jsfiddle.net/BlackLabel/g49xcm7n/


推荐阅读