在一个国家/地区/省中设置不同的颜色

时间:2018-09-21 14:01:36

标签: highcharts

我创建了印度尼西亚省的地图。我已经为每个区域设置了“ id区域”和颜色。我不知道如何在Highmaps中应用不同的颜色。

enter image description here

查看我的js fiddle

我已经在系列属性中添加了“ 颜色”,但是它似乎不起作用。任何帮助!

这是我的代码

  //set color region in here
    var data = [
    ['id-ac',"#8EE244"], //Aceh
    ['id-su',"#8644FE"]  //Sumatera Utara
    //more 31 province or region
];

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

    title: {
        text: 'Indonesia Maps'
    },
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'top'
        }
    },

    legend: {
            enabled: false
        },

    credits: {
      enabled: false
    },
    plotOptions:{
        series:{
            point:{
                events:{
                    click: function(){
                        //console.log(this);
                        alert("Province Code : "+this.options['hc-key']);
                    }
                }
            }
        }
    },
    series: [
    {
        data:  data,
        name: 'Provinsi',
        tooltip: {
           headerFormat: '',
           pointFormat: '{point.name}'
        },
        states: {
            hover: {
                color: '#BADA55'
            }
        }
    }
    ]
});

1 个答案:

答案 0 :(得分:3)

只需提供极小的更改即可提供keys值:

series: [{
    data:  data,
    keys: ['hc-key', 'color'],
    // ...
}]

这会将数据中的第一个值映射到给定数据点的hc-key,并将第二个值映射到给定数据点的color

查看其中的this JSFiddle demonstration