Question

这是我的地图配置

chart = Highcharts.mapChart('container', {

          title: {
              text: ''
          },

          //This enables the zooming functionality
          mapNavigation: {
              enabled: true
          },
          credits: {
      enabled: false
  },
          tooltip: {
              pointFormat:
                  'Server Name : {point.source_host}<br>' +
                  '{point.Hover}<br>' +                  
                  '{point.trueVUEStatus}'
          },

          xAxis: {
              crosshair: {
                  zIndex: 5,
                  dashStyle: 'dot',
                  snap: false,
                  color: 'gray'
              }
          },

          yAxis: {
              crosshair: {
                  zIndex: 5,
                  dashStyle: 'dot',
                  snap: false,
                  color: 'gray'
              }
          },

          plotOptions: {
          series: {
            //allowPointSelect: true,
            point: {
              events: {
                click: function (event) {
                  //location.href = '?' + event.point.serverName + '#serverdetailsview';
                  //alert('clicked '+ event.point.source_host);
                  window.open('index.html?' + event.point.source_host + "#serverdetailsview&store-no=" + event.point.storeNum, '_blank');
                  //http://localhost:10080/dashboard/index.html?ME629ASRFI21#serverdetailsview
                }
              }
            }
          }
          },

          series: [{
              name: 'Basemap',
              mapData: map,
              borderColor: '#606060',
              nullColor: 'rgba(200, 200, 200, 0.2)',
              showInLegend: false
          }, {
              name: 'Separators',
              type: 'mapline',
              data: H.geojson(map, 'mapline'),
              color: '#101010',
              enableMouseTracking: false,
              showInLegend: false
          }, {
              showInLegend: false,
              type: 'mapbubble',
              dataLabels: {
                  enabled: true,
                  format: '{point.storeNum}',                  
                  style:{color:"white"}
              },
              name: 'Cities1',
              data: normaljson,
              minsize: '1%',
              maxSize: '4%',
              color: '#00a65a'
          },{
              showInLegend: false,
              type: 'mapbubble',
              dataLabels: {
                  enabled: true,
                  format: '{point.storeNum}',
                  style:{color:"white"}
              },
              name: 'Cities2',
              data: warnjson,
              minsize: '1%', 
              maxSize: '4%',
              color: '#f39c12'
          },
          {
              showInLegend: false,
              type: 'mapbubble',
              dataLabels: {
                  enabled: true,
                  format: '{point.storeNum}',
                  style:{color:"white"}
              },
              name: 'Cities3',
              data: errorjson,
              minsize: '1%',
              maxSize: '4%',
              color: '#dd4b39'
          }]
      });

此后，我打电话给setData() 但是，气泡未绘制在地图上

var pt = {"source_host":"xcxxxx","lat":26.3685,"lon":-80.1344,"serverIP":"NA","store":"Bloomingdales","storeNum":"2","status":"green"};
chart.series[2].setData([pt]);

Answer 1

似乎您的点的JSON（https://api.highcharts.com/highmaps/series.mapbubble.data.z）中没有包含z属性（气泡的值）。

添加气泡后，气泡呈现良好：http://jsfiddle.net/BlackLabel/ktha1nmz/

Highcharts地图图表在调用setData时未绘制气泡

1 个答案: