结合饼图和地图

Question

我正在尝试使用 Highcharts 和 Highmaps 在地图上绘制 PieCharts。我没有在文档中找到任何具体的内容，也没有在 Web 上找到示例。我正在关注 this demo，在那里我可以在地图上绘制地图气泡。我想做完全相同的事情，但使用饼图而不是地图气泡。

到目前为止我拥有的是：

   $('.map').slideDown().highcharts('Map', {
        title: {
            text: null
        },
        mapNavigation: {
            enabled: true
        },
        series: [{ // First series, plot the map
            mapData: result,
            name: 'Random data'             
        }, { // Second serie, plot a pie chart on specific coordinates
            type: 'pie',
            dataLabels: {
                enabled: true
            },
            name: 'Cities',
            data: [{
                lat: -21.194476, 
                lon: -43.794456,
                y: 100,
                name: 'Barbacena'
            }, {
                lat: -21.194476, 
                lon: -43.794456,
                y: 50,
                name: 'Barbacena'
            }],
            maxSize: '12%'
        }],
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'bottom'
        },
    });

绘制了饼图，但它完全忽略了地图。拖地图的时候不拖。

那么，Highcharts 中有内置的方法吗？

提前致谢

Answer 1

我写了一个包装器，可以根据 lat/lon 绘制饼图。有关 lat/lon 的更多信息，请访问网站 here。

第一步是将lat/lon解析为x/y，这可以通过chart.fromLatLonToPoint()来实现。之后需要设置饼图的中心。中心接受像素，因此 x/y 值应转换为像素 - 它可以通过 axis.toPixels() 方法实现。

Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'getCenter', function(p) {
var centerOptions = this.options.center,
  centerLatLonOptions = this.options.centerLatLon,
  chart = this.chart,
  slicedOffset = this.options.slicedOffset,
  pos,
  lat,
  lon;

if (centerLatLonOptions && chart.fromLatLonToPoint) {
  pos = chart.fromLatLonToPoint({
    lat: centerLatLonOptions[0],
    lon: centerLatLonOptions[1]
  });

  centerOptions[0] = chart.xAxis[0].toPixels(pos.x, true) - 2 * slicedOffset;
  centerOptions[1] = chart.yAxis[0].toPixels(pos.y, true) - 2 * slicedOffset;
}

return p.call(this);
});

重新居中饼图需要在重绘时调用，它可以让饼图保持在正确的位置。

redraw: function() {
      if (!this.centeringPies) {
        this.centeringPies = true;

        this.series.forEach(function(serie) {
          if (serie.type === 'pie' && serie.options.centerLatLon) {
            serie.update({
              center: serie.getCenter()
            }, false);
          }
        });

        this.redraw(false);
        this.centeringPies = false;
      }
    },

示例：https://jsfiddle.net/qqyLb7qx/1/

要做的一件事是检查饼图是否在绘图区域内 - 如果不是，则将其隐藏。

结合饼图和地图

Combine PieChart with Map

highcharts

highmaps