Изменить цвет карты в определенных провинциях - PullRequest
Новая
       18

Изменить цвет карты в определенных провинциях

0 голосов
/ 07 ноября 2019

Я использую демо-ссылку здесь . 

// 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}'
    }
}]
});

Это демонстрационный код, но я бы хотел изменить цвет, используемый только для определенных провинций. На самом деле все провинции синего цвета, но я хочу изменить цвет в соответствии с регионами.

Ответы [ 2 ]

0 голосов
/ 11 ноября 2019

Этого можно добиться, добавив цвет к конкретным точкам данных и установив свойство keys, чтобы указать, какой параметр соответствует какому ключу в массиве точек данных. Проверьте демо и код, указанный ниже.

Код: 

var data = [
  ['it-na', 0, 'red'],
  ['it-tp', 1, 'green']
]

chart: {
  series: [{
        data: data,
    keys: ['hc-key', 'value', 'color']
  }]
}

Демо:

Справочник по API:

0 голосов
/ 08 ноября 2019

я тоже пытался это сделать: 

    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]
                            ]
                }
        ]
});

но он загружает только вторую серию ....

...