Question

我正在尝试使用与其系列相同的颜色设置数据标签的backgroundColor（UI原因）。

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

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: 'Browser market share, April, 2011'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
  plotOptions : {
        series : {

        }
    },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
            }
        },
        series: [{
            name: 'Browsers',
            data: [["Firefox",6],["MSIE",4],["Chrome",7]],
            size: '60%',
            innerSize: '20%',
  dataLabels : {
                connectorwidth:0,
                enabled : true,
                useHTML: true,
                formatter : function() {
                    return $('<div/>').css({
                        'color' : this.series.color, //  don't work
                        'border' : '2px solid ', // work
                        'backgroundColor' : this.series.color // don't work
                    }).text(this.y)[0].outerHTML;
                }
            }

        }]
    });
});

Answer 1

您可以this.point.color使用formatter：

formatter : function() {
    return $('<div/>').css({
        'color' : this.point.color, // work
        'border' : '2px solid ',    // work
        'backgroundColor' : '#fff'  // just white in my case
    }).text(this.y)[0].outerHTML;
}

更新了jsfiddle：http://jsfiddle.net/m2urnx81/1/

设置highcharts datalabels backgroundColor与其饼图系列的颜色相同

1 个答案: