javascript - 在 Highcharts JavaScript 饼图中的图例中创建系列/组标题

Question

我有一组数据，我使用 HighCharts 将其表示为饼图。

我试图将图例中的标签分成两个不同的组，并给它们标题。仅用于图例显示目的，图表本身没有变化。

我尝试使用 labelFormatter 插入组标题，但没有成功。我还尝试了 linkedTo 属性，但它似乎没有按照我的意愿执行。

我有一个在图表加载时运行的函数，我可以在其中操纵图例项的放置，以在两组之间创建分离。但是我无法添加标题。

有没有人在使用 HighCharts 之前遇到过这个问题并管理了一个解决方案？

这是一个 fiddle ，展示了我能够完成的工作(两组分开，但没有标题):http://jsfiddle.net/EacF5/1/

这是我编写的用于在加载图表时手动操作图例的函数:

load: function(){
    var $hc_start = -1;
    $(".highcharts-legend-item").each( function(){
        var t = $(this).find("tspan").text().split( ':' );
        switch ( t[0] ){
            case 'Group 2 Title 1':
            case 'Group 2 Title 2':
                var t = $(this).attr( 'transform' ).split( ',' );
                t[1] = parseInt( t[1].replace( ')', '' ) );
                t[1] = sum(t[1])(15);
                $(this).attr( 'transform', t[0] + ',' + t[1]  + ')' );

                $hc_start = 1;
                break;
            default:
        }
    });
}

请让我知道我可以为您提供哪些进一步的信息 :) 谢谢!

Answer 1

你可以设置useHTML为true，然后添加元素或者使用带有css样式的labelformater。非常简单的代码；

http://jsfiddle.net/EacF5/2/

labelFormatter: function () {

            if (this.x == 0) return '<h2>Title Group 1</h2>' + this.name;
            else if (this.x == 2) return '<div class="second"><h2>Title Group 2</h2>' + this.name + '</div>';
            else return this.name;

        },