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，这可以通过axis.toPixels()来实现。之后，需要设置饼图的中心。中心接受像素，因此x / y值应转换为像素 - 可以使用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;
      }
    },

需要在重绘时调用重新定位饼图，它允许饼图保持在正确的位置。

{{1}}

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

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

将PieChart与地图相结合

1 个答案: