Highmaps - Изменить на mapbubble - PullRequest
Новая
       32

Highmaps - Изменить на mapbubble

0 голосов
/ 19 мая 2018

Я пытался изменить диаграмму Highmaps на пузырь, добавив
type: 'mapbubble', как показано ниже, но не удалось. Есть ли способ сделать это?Я не знаю, где что-то пошло не так 

series: [{
  type: 'mapbubble',
  data: data,

Благодарю, если кто-нибудь может помочь мне сделать это на основе приведенного ниже кода

Ссылка на jsfiddle 

   mapChart = Highcharts.mapChart('mapchart', {

        title: {
            text: 'Population history by country'
        },

        subtitle: {
            text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
        },

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

        colorAxis: {
         //  type: 'logarithmic',
            endOnTick: false,
            startOnTick: false,
            min: 50000
        },

        tooltip: {
            footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
        },

        series: [{
            data: data,
            mapData: mapData,
            joinBy: ['iso-a3', 'code3'],
            name: 'Current population',
            allowPointSelect: true,
            cursor: 'pointer',
            states: {
                select: {
                    color: '#a4edba',
                    borderColor: 'black',
                    dashStyle: 'shortdot'
                }
            }
        }]
    });

1 Ответ

0 голосов
/ 21 мая 2018

  1. Заменить point.value на point.z

    data.push({
  name: countries[code3].name,
  code3: code3,
  z: value,
  year: year
});

  2. Установить chart.map реквизит для mapData: 

    chart: {
  map: mapData
},

  3. Создайте новую серию, которая будет фоновым слоем для пузырьков. 

    series: [{
  name: 'Countries',
  color: '#E0E0E0',
  enableMouseTracking: false
},

  4. Установите тип основной серии на mapbubble

    {
  data: data,
  type: 'mapbubble',
  ...

живой пример: https://jsfiddle.net/xf4tkec1/

...