將標簽添加到highcharts餅圖圖例中的列

Question

我正在研究圖表，我對圖例有疑問。 我在餅形圖的圖例中有4列，並且需要為每個列指定標題。 我正在使用以下代碼，結果在下面給出。

               useHTML: true,
                labelFormatter: function () {

                    return '<div style="width:800px"><span style="float:left;width:200px">' + this.name + '</span><span>'
                        + this.description + '</span><span style="float:right;width:100px">' + this.target + '</span><span style="float:right;width:100px">' + Highcharts.numberFormat(this.y, 0) + '%</span></div>';
        }

Answer 1

您可以禁用圖例格式器，然后准備自己的HTML圖例，以創建所需的樣式。 簡單的HTML圖例示例：

$legend = $('#customLegend');

    $.each(chart.series[0].data, function (j, data) {

        $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');

    });

    $('#customLegend .item').click(function(){
        var inx = $(this).index(),
            point = chart.series[0].data[inx];

        if(point.visible)
            point.setVisible(false);
        else
            point.setVisible(true);
    });  

http://jsfiddle.net/N3KAC/1/