highcharts - Highcharts 按功能更改 dataLabel 选项“内部”

Question

我们正在尝试根据渲染矩形的大小在瀑布图中设置 dataLables。

更详细地说，我们的目标是如果矩形高度 <= dataLabel 的 fontSize（在我们的例子中为 11），则将 dataLabel 放置在矩形之外（通过选项 inside：false）。

小提琴示例

$(function () {

var chart = new Highcharts.Chart({
    chart: {
        type: 'waterfall',
        renderTo: 'container'
    },

    title: {
        text: 'Highcharts Waterfall'
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: 'USD'
        }
    },

    legend: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return Highcharts.numberFormat(this.y, 0, ',') + 'k';
                },
                style: {
                    fontSize: 11,
                    color: 'white'
                }
            },
            pointPadding: 0
        }
    },

    series: [{
        color: Highcharts.getOptions().colors[0],
        data: [{
            name: 'Start',
            y: 5
        }, {
            name: 'Product Revenue',
            y: 10
        }, {
            name: 'Service Revenue',
            y: 0.5
        }, {
            name: 'Fixed Costs',
            y: 3
        }, {
            name: 'Variable Costs',
            y: 5
        }]
    }]
},

function (chart) {
    var points = chart.series[0].points;

    for (var i = 0; i < points.length; i++) {

        if (points[i].shapeArgs.height <= 11) {
            // place dataLabel of this point outside and change color
            points[i].dataLabel.attr({
                color: 'black',
                inside: false
            });

        }
    };
});
});`   

一般来说，我们的问题是我们不确切知道如何在图表呈现后正确更改图表选项。因此，如果有人也可以向我们解释这一点，我们将非常高兴。

Answer 1

如果要更新颜色，则需要使用 css() 函数，但如果需要移动标签，则需要使用 attr() 或 translate() 函数。

http://jsfiddle.net/e4HCn/2/

points[i].dataLabel
            .css({
                color: 'red'
            })
            .attr({
                y: y
            });