Javascript Highchart中的条形图内外的数据标签颜色是否可以不同

Javascript Highchart中的条形图内外的数据标签颜色是否可以不同,javascript,highcharts,Javascript,Highcharts,我想知道,如果文本不适合条形图的长度,条形图中文本的颜色(plotOptions.bar.dataLabels.color)可能会不同。例如: 代码如下: $(function () { $('#container').highcharts({ chart: { type: 'bar', height: 700 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Ma

我想知道,如果文本不适合条形图的长度,条形图中文本的颜色(plotOptions.bar.dataLabels.color)可能会不同。例如:

代码如下:

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar',
        height: 700
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0.2,
            dataLabels: {
                enabled: true,
                color: 'black',
                align: "right",
                format: '{y} M',
                inside: false,
                style: {
                    fontWeight: 'bold'
                },
                verticalAlign: "middle"
            },
        }
    },

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


提前感谢

可能的解决方案是使用格式化程序。确定值是否低于某个级别,然后更改dataLabel颜色。例如:

格式化程序:函数(){
var max=this.series.yAxis.max,
color=this.y/max<0.05?'black':'white';//5%宽度
返回''+this.y+'M';
},
您还可以将点的宽度与y值字符串的长度进行比较。

我使用“isInside”值,如下所示:

系列:[{
名称:'百分比',
数据:this.calculateChartSeries(),
数据标签:{
启用:对,
轮换:0,
对齐:“右”,
边框宽度:1,
格式化程序:函数(){
if(this.point.isInside==true){
返回''+this.y+'%';
}否则{
返回''+this.y+'%';
}
}
}
}]

您可以将颜色设置为
对比度
,它将根据dataLabel是否在条内/条外而变化

style: {
    color: 'contrast'
}

我也有类似的问题。我有一个柱状图,默认情况下,我希望我的标签是白色的,并旋转到-90度。但是如果列的大小很小,旋转应该是零和黑色;如何使旋转可选?仍然尝试使用formatter:使用一些CSS旋转,而不是内置的Highcharts旋转。或者为文档添加调整大小事件,在需要时,您将在其中使用新的旋转更新序列。
isInside
属性指数据点是否在绘图区域内,并非如原始海报截图所示,标签是否已放置在酒吧或柱子内。请使用属性
this.point.shapeArgs.height
style: {
    color: 'contrast'
}