Question

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

我试图将图例中的标签分成两个不同的组，并给它们标题。仅用于图例显示目的，不对图表本身进行更改。

我尝试使用labelFormatter插入群组标题，但没有成功。我也尝试了linkedTo属性似乎没有做我想要的。

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

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

这是一个小提琴，展示了我能够完成的任务（分离两组，但没有标题）：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;

        },

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

1 个答案: