高图表中的值或逻辑相关的数据标签格式

Question

是否有高图表的解决方案来根据值来格式化标签？

我知道有基于数据值的列的依赖格式设置的颜色区域选项。例如，如果值大于10，则列变为红色，否则保留基色。

我需要在dataLabels上得到非常类似的函数。如果值大于10，则将标签背景改为红色。如果这是可能的，那么是否存在一个从数据系列中动态获取这个特定值的解决方案，或者只可以/应该是一个静态设置？

大于100的值应具有红色dataLabel背景色，其余(较小的)绿色背景色：https://jsfiddle.net/saboarpad/6bow3mx1/3/。

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

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            backgroundColor:'red',
            color:'white'
        }
    }
},

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]
}]

})；

Answer 1

生成数据标签样式后，可以编辑它们：

chart: {
    events: {
        load: function() {
            var points = this.series[0].points;

            points.forEach(function(point) {
                if (point.y > 100) {
                    point.dataLabel.text.css({
                        'color': 'white',
                        'background-color': 'red'
                    });
                }
            });
        }
    }
}

现场演示：https://jsfiddle.net/BlackLabel/h64gjL2t/

此外，您还可以为每一点单独格式化dataLabel：https://jsfiddle.net/BlackLabel/4k8p6mfg/

series: [{
    data: [{
            x: 0,
            y: 29.9,
            dataLabels: {
                backgroundColor: 'red',
                color: 'white'
            }
        },
        71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4
    ]
}]

API：https://api.highcharts.com/highcharts/series.line.data.dataLabels

Answer 2

我找到了类似的解决方案，但代码的使用并不清楚。在HTML中，有一个“格式化程序”函数，它根据这个.y值定义颜色代码，所以这里我们可以对数据做一些比较:哪个比较大，哪个比较小，函数返回颜色代码并连接到HTML元素内联样式中。然而，所有的工作，直到是使用普通的“颜色”标签，但这是为颜色的字体。我也需要改变背景。因此，我将颜色标签更改为: 1.高级图表自己的标签："backgroundColor“--什么都不会发生2. HMTL背地颜色标签：”背景颜色“--什么都不会发生。

) :(我觉得有点迷茫。

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

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            color: 'blue',
            formatter: function() {
                var color = this.y > 100 ? 'red': 'green'
                return '<span style="color: ' + color + '">' + this.y + '</span>';
            }



        }
    }
},

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]
}]

})；