지도로 파이 차트 결합

Question

하이 차트 및 하이 맵을 사용하여지도 위에 PieCharts를 플롯하려고합니다. 웹에서 예제를 찾지 못했지만 관련 문서에서이 항목에 대한 구체적인 내용을 찾지 못했습니다. 나는지도 위에 mapbubles를 그릴 수있는 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' 
     }, 
    }); 

파이 차트가 그려집니다하지만 완전히지도를 무시 :

지금까지 내가 가지고있는 것입니다. 지도를 끌면 주변에 흘러 들지 않습니다.

그래서, 하이 차트에 내장 된 방법이 있습니까?

미리 감사

Answer 1

에 나는 위도/경도에 따라 파이 차트를 그릴 수있는 래퍼를 작성했습니다. lat/lon에 대한 자세한 내용은 here 웹 사이트를 참조하십시오.

첫 번째 단계는 lat/lon을 x/y로 구문 분석하는 것입니다. 이는 chart.fromLatLonToPoint()에 의해 달성 될 수 있습니다. 그 후 원형 차트의 중심을 설정해야합니다. Center는 픽셀을 받아들이므로 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/

할 일이 파이 차트는 플롯 영역 내부에 있는지 확인하는 것입니다 -와 그렇지 않은 경우를 숨 깁니다.