Question

H，

我们正在尝试使用以下高图，

http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/in/custom/in-all-disputed

我担心的是，我们希望地图只显示我们想要的地区的名称，而不是当前正在进行的所有地区。我们只想显示德里，马哈拉施特拉邦等地区的名称而不是全部。

＆＃13;

$(function () {

    // Prepare demo data
    var data = [
        {
            "hc-key": "in-an",
            "value": 0
        },
        {
            "hc-key": "in-wb",
            "value": 1
        },
        {
            "hc-key": "in-ld",
            "value": 2
        },
        {
            "hc-key": "in-5390",
            "value": 3
        },
        {
            "hc-key": "in-py",
            "value": 4
        },
        {
            "hc-key": "in-3464",
            "value": 5
        },
        {
            "hc-key": "in-mz",
            "value": 6
        },
        {
            "hc-key": "in-as",
            "value": 7
        },
        {
            "hc-key": "in-pb",
            "value": 8
        },
        {
            "hc-key": "in-ga",
            "value": 9
        },
        {
            "hc-key": "in-2984",
            "value": 10
        },
        {
            "hc-key": "in-jk",
            "value": 11
        },
        {
            "hc-key": "in-hr",
            "value": 12
        },
        {
            "hc-key": "in-nl",
            "value": 13
        },
        {
            "hc-key": "in-mn",
            "value": 14
        },
        {
            "hc-key": "in-tr",
            "value": 15
        },
        {
            "hc-key": "in-mp",
            "value": 16
        },
        {
            "hc-key": "in-ct",
            "value": 17
        },
        {
            "hc-key": "in-ar",
            "value": 18
        },
        {
            "hc-key": "in-ml",
            "value": 19
        },
        {
            "hc-key": "in-kl",
            "value": 20
        },
        {
            "hc-key": "in-ap",
            "value": 21
        },
        {
            "hc-key": "in-ka",
            "value": 22
        },
        {
            "hc-key": "in-mh",
            "value": 23
        },
        {
            "hc-key": "in-or",
            "value": 24
        },
        {
            "hc-key": "in-dn",
            "value": 25
        },
        {
            "hc-key": "in-dl",
            "value": 26
        },
        {
            "hc-key": "in-hp",
            "value": 27
        },
        {
            "hc-key": "in-rj",
            "value": 28
        },
        {
            "hc-key": "in-up",
            "value": 29
        },
        {
            "hc-key": "in-ut",
            "value": 30
        },
        {
            "hc-key": "in-jh",
            "value": 31
        },
        {
            "hc-key": "in-ch",
            "value": 32
        },
        {
            "hc-key": "in-br",
            "value": 33
        },
        {
            "hc-key": "in-sk",
            "value": 34
        },
        {
            "hc-key": "in-tn",
            "value": 35
        }
    ];

    // Initiate the chart
    $('#container').highcharts('Map', {

        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,
            mapData: Highcharts.maps['countries/in/custom/in-all-disputed'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/in/custom/in-all-disputed.js"></script>

<div id="container"></div>

＆＃13;

此致 Ayush

Answer 1

我将说明两种类似的方法，具体取决于您想要显示/不显示标题的点数。

您可以自己提供名称，但仅限于您要显示的名称，然后更改series.dataLabels.format以使用该名称选项。这最适合显示少数名称或自定义名称。例如（JSFiddle）：

var data = [
    {
        "hc-key": "in-an",
        "value": 0,
        "name": "My name"
    },
    //...
];

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

    series : [{
        //...
        dataLabels: {
            enabled: true,
            format: '{point.options.name}'
        }
    }]
});

或者，在data数组中使用布尔值表示您要隐藏该名称并使用formatter隐藏它们。这最适合显示大多数默认名称并隐藏一些。例如（JSFiddle）：

var data = [
    {
        "hc-key": "in-an",
        "value": 0,
        "hide-name": true
    },
    //...
];

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

    series : [{
        //...
        dataLabels: {
            enabled: true,
            formatter: function() {
                if(this.point.options["hide-name"])
                    return;
                return this.point.name;
            }
        }
    }]
});

请注意，隐藏了一些名称标签，但未在此处指定。这是因为allowOverlap默认设置为false。只需添加series.dataLabels.allowOverlap: true即可显示重叠标签。

仅突出显示高图中的选定区域

1 个答案: