모든 고유 항목으로 Highcharts 범례를 병합하는 방법

Question

나는 PIE 차트 쌍으로 작업하고 있습니다. 각각은 동일한 주제의 데이터를 다루며 동일한 슬라이스 항목을 가질 수 있습니다. 그러나 모든 범례 항목이 항상 두 PIE에 표시되는 것은 아닙니다. 이 문제에 대한 몇 가지 해결책을 살펴 보았습니다 (가장 가까운이 one). 그러나 PIE 중 하나에 다른 조각이있는 슬라이스가 없을 때 중단됩니다.

테스트 사례 jsFiddle은 첫 번째 PIE가 두 번째 PIE가 수행하는 동안 'Engineering' 슬라이스가 없음을 보여줍니다. 그러나 이것은 아이템이 범례에 나타나지 않는다는 것을 의미합니다. 하나의 단일 범례에서 각 PIE 범례의 모든 고유 항목을 얻으려면 어떻게합니까? 다음,

당신은 독특한 포인트의 이름을 포함하는 배열을 얻을 필요가

$(chart.series[0].data).each(function(i, e) { 
    e.legendItem.on('click', function(event) { 
     var legendItem = e.name; 

     event.stopPropagation(); 

     $(chart.series).each(function(j, f) { 
     $(this.data).each(function(k, z) { 
      if (z.name == legendItem) { 
      if (z.visible) { 
       z.setVisible(false); 
      } else { 
       z.setVisible(true); 
      } 
      } 
     }); 
     }); 

    }); 
    }); 

Answer 1

(이 전설이 될 것이다) :

이 현재 콜백 함수이다 ([0]이 시리즈를 기반으로 통지) 범례의 항목을 반복하고 적절한 이벤트를 설정합니다.

아래의 제안 사항은 테스트 사례에 충분합니다 (예 : 링크 된 시리즈를 고려하지 않음).

범례에 대한 항목을 전달하는 getAllItems() 메소드에 대한 래퍼가 있습니다. 여기서 고유 한 포인트 이름을 얻습니다 (고유 한 이름을 찾는 루프가 최적화 될 수 있지만이 경우 차이는 무시할 수 있습니다). 전설 포장되지 않는 행동해야하는 경우

Highcharts.wrap(Highcharts.Legend.prototype, 'getAllItems', function (p) {    
      if (!this.options.mergedPieItems) { 
       return p.call(this); 
      } 

      var allItems = [], 
       uniquePieNames = []; 

      this.chart.series.forEach(function (series) { 
       var i, 
        len, 
        point; 

       if (series.type === 'pie') { 
        for (i = 0, len = series.data.length; i < len; i++) { 
         point = series.data[i]; 

         if (uniquePieNames.indexOf(point.name) === -1) { 
          uniquePieNames.push(point.name); 
          allItems.push(point); 
         } 
        } 
       } else { 
        allItems.push(series); 
       } 
      }); 

      return allItems; 
     }); 

가 여기에 이벤트를 설정, 이것이 거의 코드의 사본은 당신이 경우에,

load: function() { 
        if (this.options.legend.mergedPieItems) { 
         var series = this.series; 

         this.legend.allItems.forEach(function (item) { 
          if (item.series) { 
           item.legendItem.element.onclick = function (e) { 
            e.stopPropagation(); 

            series.forEach(function (series) { 
             series.data.forEach(function (point) { 
              if (point.name === item.name) { 
               point.setVisible(!point.visible); 
              } 
             }); 
            }); 
           }; 
          } 
         }); 
        } 
       } 

활성화 래퍼 및 콜백을 부착.

legend: { 
      enabled: true, 
      mergedPieItems: true 
     }, 

귀하의 예 : 파이 다른 시리즈 http://jsfiddle.net/fjLao4nr/2/

예 : http://jsfiddle.net/fjLao4nr/

색 조각은 파이에 대한 일치하지 않습니다의 -하지만이 점에 대해 동일한 색상을 설정함으로써 달성 될 수있다 . 또한 범례의 항목을 가리키면 한 시리즈의 한 지점 만 강조 표시됩니다. 이는 mousebow/mouseout 이벤트에서 점의 상태를 설정하여 수행 할 수 있습니다 (로드 콜백에서와 유사).