Highcharts：如何动态移动项目图例位置

Question

我有这个饼图：

在任何切片的鼠标悬停事件上，我必须 select 该切片并隐藏图例项目，除了对应切片的图例 selected，如下图：

现在，我想要的是动态更改图例项位置并将其放在图例框的顶部。

拜托，你能帮帮我吗？

我post我的代码如下：

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

Highcharts：如何动态移动项目图例位置

Highcharts: how to move item legend position dynamically

javascript

jquery

charts

highcharts

pie-chart