javascript - 设置 highcharts datalabels 的背景颜色与其系列的颜色相同

Question

我正在尝试将数据标签的背景颜色设置为与其系列相同的颜色(UI 原因)。

我尝试使用格式化程序选项并返回具有所需样式的“div”，但只有字体颜色适用于 dataLabel。

如何解决这个问题？按照我正在尝试的代码进行操作。

$(function () {
    $('#container').highcharts({

        chart: {
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                     'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions : {
            series : {
                dataLabels : {
                    enabled : true,
                    formatter : function() {
                        return $('<div/>').css({
                            'color' : this.series.color, // works
                            'border' : '1px solid black', // don't work
                            'backgroundColor' : this.series.color // don't work
                        }).text(this.y)[0].outerHTML;
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
        {
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]}]

    });
});

链接到实际示例:http://jsfiddle.net/eVfZD/

更新:

解决方案很简单。只需将选项“useHTML”设置为 true 并将样式设置为在格式化程序函数内创建的“div”即可。

Answer 1

如果您使用 html 标签，请设置 useHTML: true，这应该可以解决该问题:http://jsfiddle.net/eVfZD/1/