Javascript Highchart中的条形图内外的数据标签颜色是否可以不同
我想知道,如果文本不适合条形图的长度,条形图中文本的颜色(plotOptions.bar.dataLabels.color)可能会不同。例如: 代码如下: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
$(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'
}