Highcharts: как переместить позицию элемент легенды динамически

Question

У меня есть эта круговая диаграмма:

На наведении курсора мыши случае любого среза, я должен выбрать, что срез и скрытие условных обозначений предметов, кроме одной, соответствующее ломтик выбран, как на рисунке:

Теперь, что я хочу, чтобы динамически изменять положение элемента условных обозначений и поставить его на вершине т он легендарный ящик.

Пожалуйста, помогите мне?

Я отправляю мой код ниже:

function disegnaComposizionePTF_pie(grafico, seriesName, chartData, urlImg) { 
$(document).find('.title-row').find('#btnPie').attr('class','iconPieSelected'); 
$(document).find('.title-row').find('#btnPie').attr('src',urlImg); 

$(document).find('.title-row').find('#btnBar').attr('class','iconBar'); 
$(document).find('.title-row').find('#btnBar').attr('src',urlImg); 

var originalStr = null; 
var currentLegendColor = null; 
var data = chartData; 

$(grafico).highcharts({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 
    title: { 
     text: null 
    }, 
    credits: { 
     enabled: false 
    }, 
    tooltip: { 
     formatter: myFormatter 
    }, 
    legend: { 
     useHTML: true, 
     align: 'right', 
     layout: 'vertical', 
     verticalAlign: 'middle', 
     x: -50, 
     labelFormatter: function() { 
      var legendName = this.name; 
      var match = legendName.match(/.{1,15}/g); 
      return match.toString().replace(/\,/g,"<br/>"); 
     } 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      innerSize: '60%', 
      size: '100%', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true, 
      point: { 
       events: { 
        mouseOver: function() { 
         console.log("mouseover"); 
         this.select(true); 
         originalStr = this.legendItem.textStr; 
         currentLegendColor = this.legendItem.color; 

         var pos = -1; 
         for (i in this.series.data) { 
          var p = this.series.data[i]; 
          if (p.name != this.name) { 
           p.legendSymbol.hide(); 
           p.legendGroup.hide(); 
          } else { 
           pos = i; 
          } 
         } 
         this.legendItem.textSetter(data[pos].longName); 
         var currentPos = this.series.data[pos].legendIndex; 
         console.log(currentPos); 
        }, 
        mouseOut: function() { 
         console.log("mouseout"); 
         this.select(false); 
         this.legendItem.textSetter(originalStr); 
         for (i in this.series.data) { 
          var p = this.series.data[i]; 
          if (p.name != this.name) { 
           p.legendSymbol.show(); 
           p.legendGroup.show(); 
          } 
         }       
        } 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: seriesName, 
     colorByPoint: true, 
     data: chartData 
    }] 
}); 

}

Answer 1

Как насчет битного другого решения? В текущем случае будет больно управлять всеми предметами, заказами, позициями и т. Д. Вместо этого я предлагаю скрыть легенду и сделать это, чтобы разместить какую-то индивидуальную метку: http://jsfiddle.net/3k9zd9r0/

Конечно, для этого требуется немного полирования , но это касается только строения правильной струны (str):

plotOptions: { 
     pie: { 
      dataLabels: { 
       enabled: false 
      }, 
      point: { 
       events: { 
        mouseOver: function() { 
         var chart = this.series.chart, 
          legend = chart.legend, 
          legendGroup = legend.group, 
          str = [ // build string for legend place 
           '<span style="color: ', 
            this.color, 
           ';">\u25CF </span>', 
           this.name, 
           '<br>\u25CF ', 
           'Milk', 
           '<br>\u25CF ', 
           'Other info' 
          ].join(''); 

         this.select(true); 
         legendGroup.hide(); // hide legend 

         this.series.customLabel = chart.renderer.label(str, legendGroup.attr('translateX'), legendGroup.attr('translateY')).add(); // add customized label 
        }, 
        mouseOut: function() { 
         var chart = this.series.chart, 
          legend = chart.legend; 

         this.select(false); 
         legend.group.show(); // show back legend 

         if (this.series.customLabel) { 
          this.series.customLabel = this.series.customLabel.destroy(); // destroy customized label 
         } 
        } 
       } 
      } 
     } 
    },