Highmaps 混合气泡图和地图线导致地图偏移

Question

我正在制作混合气泡图和地图线的 Highchart 地图。我使用第一个系列根据测量范围显示地图和颜色区域，使用第二个系列在区域上显示气泡

var data = [
  ["05", 48810.00, 48810, 10, 19768, -1],
  ["09", 39239.00, 39239, 10, 13348, -1],
  ["10", 14974.00, 14974, 10, 7252, -1],
  ["11", 57124.00, 57124, 10, 26272, -1],
  ["14", 38821.00, 38821, 10, 17547, -1]
], maxSize = 0;
var all_codes = ["05", "09", "10", "11", "14"];
var Color = [];
Color[0] = "rgba(116, 171, 226, 0.8)";
Color[1] = "rgba(239, 141, 93, 0.8)";
Color[2] = "rgba(63, 182, 142, 0.8)";
Color[3] = "rgba(240, 106, 147, 0.8)";
Color[4] = "rgba(169, 125, 216, 0.8)";
Color[5] = "rgba(58, 181, 194, 0.8)";
Color[6] = "rgba(105, 115, 246, 0.8)";
Color[7] = "rgba(205, 89, 177, 0.8)";
Color[8] = "rgba(140, 162, 171, 0.8)";
Color[9] = "rgba(243, 135, 135, 0.8)";
Color[10] = "rgba(77, 120, 162, 0.8)";
Color[11] = "rgba(24, 102, 180, 0.8)";
Color[12] = "rgba(204, 67, 0, 0.8)";
Color[13] = "rgba(3, 115, 77, 0.8)";
Color[14] = "rgba(215, 9, 71, 0.8)";
Color[15] = "rgba(119, 42, 203, 0.8)";
Color[16] = "rgba(8, 119, 131, 0.8)";
Color[17] = "rgba(37, 49, 212, 0.8)";
Color[18] = "rgba(146, 20, 115, 0.8)";

serie_color = [{
  from: 0,
  to: 5254,
  name: '< 5 254.00',
  color: Color[0]
}, {
  from: 5255,
  to: 10509,
  name: 'From 5 255.00 to 10 509.00',
  color: Color[1]
}, {
  from: 10510,
  to: 15764,
  name: 'From 10 510.00 to 15 764.00',
  color: Color[2]
}, {
  from: 15765,
  to: 21019,
  name: 'From 15 765.00 to 21 019.00',
  color: Color[3]
}, {
  from: 21020,
  to: 26274,
  name: '> 21 020.00',
  color: Color[4]
}, ];

$(function() {
 
 var chart = Highcharts.mapChart("container", {

    chart: {
      backgroundColor: "#ffffff",
      animation: false
    },
    colorAxis: [{
        dataClasses: serie_color
      },
      {
        minColor: '#efecf3',
        maxColor: '#990041',
      }
    ],
    mapNavigation: {
      enabled: true
    },

    series: [{
        mapData: Highcharts.maps["bret"],
        data: data,
        name: "States",
        borderColor: "#319663",
        nullColor: "#f7f7f7",
        showInLegend: true,
        joinBy: ["code", "CODE_REGION"],
        keys: ["CODE_REGION", "DimGraphList_0", "z", "valSize", "value", "pieOffset"]
      },
      {
        mapData: Highcharts.maps["bret"],
        type: "mapbubble",
        name: "Bubbles",
        colorAxis: 1,
        showInLegend: true,
        joinBy: ["code", "CODE_REGION"],
        keys: ["CODE_REGION", "DimGraphList_0", "z", "valSize", "value", "pieOffset"],
        data: data,
        minSize: "5%",
        maxSize: "15%"
      }
    ]
  });

});

结果很好 (https://jsfiddle.net/vegaelce/f7neq2a1/) 但我有一个奇怪的行为，当气泡显示在地图上时，地图偏离了中心。在 jsfiddle 上，如果您单击图例中的“气泡”值（以隐藏它们），您将看到地图移动并居中（这应该是显示气泡的预期正确位置）。关于此举有什么建议吗？我怀疑偏移量或其他东西但是如何 find/set 它？

另一个提示与图例有关：我想将 2 个图例移动到不同的点上：

图表底部第一个系列的图例（彩色圆点）
图表左侧（或右侧）气泡的标量图例

Highchart 认为图例只有一个（将 2 个系列分组），是否可以将它们分离？

提前致谢

Answer 1

第一个问题看起来像是 Highcharts 错误（与错误计算 x 轴极值有关），您可以在此处报告：https://github.com/highcharts/highcharts/issues/new/choose

使用此代码作为解决方法：

Highcharts.seriesTypes.mapbubble.prototype.useMapGeometry = true;

现场演示： https://jsfiddle.net/BlackLabel/oL1zahtm/

关于你的第二个问题——Highcharts 没有内置对多个图例的支持，但你可以通过手动翻译更改一些图例项的位置，例如：

chart: {
  ...,
  events: {
    render: function() {
      this.legend.allItems[5].legendGroup.attr({
        translateX: -50,
        translateY: -50
      });

      this.legend.allItems[6].legendGroup.attr({
        translateX: -50,
        translateY: -70
      });
    }
  }
}

现场演示： https://jsfiddle.net/BlackLabel/m7zaeLrd/

Highmaps 混合气泡图和地图线导致地图偏移

Highmaps mix Bubble map and maplines causes map offset

highcharts

bubble-chart