高圖：如何動態移動項目圖例位置

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
                        }
                    }
                }
            }
        }
    },