更改特定省份的地图颜色

问题描述 投票:0回答:1

我正在使用链接为here的演示。

// 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 = [
    ['it-na', 0],
    ['it-tp', 1],
    ['it-pa', 2],
    ['it-me', 3],
    ...
    ['it-pn', 107],
    ['it-vi', 108],
    ['it-tv', 109]
];

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

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

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

这是演示代码,但我想更改仅用于特定省份的颜色。实际上所有省份都是蓝色的,但是我想根据地区来更改颜色。

javascript highcharts colors
1个回答
0
投票

我也尝试这样做:

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

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

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

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

    colorAxis: {
        min: 0
    },

    series: [
            {
        name: 'Prodotti Acquistati Area1',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        },
        data: [
    ['it-na', 0],
    ['it-tp', 1],
    ['it-pa', 2]
                            ] 
             },
         {
        name: 'Prodotti Acquistati Area2',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        },
        data: [
    ['it-rm', 52],
    ['it-ch', 53],
    ['it-vt', 54]
                            ]
                }
        ]
});

但是它仅加载第二个系列。...

© www.soinside.com 2019 - 2024. All rights reserved.