Highchart中的酒吧内外数据标签的颜色可以不同 [英] Can color of data label be different inside and outside of the bar in Highchart
本文介绍了Highchart中的酒吧内外数据标签的颜色可以不同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道,如果文本不符合条长度,条形图内部文本的颜色(plotOptions.bar.dataLabels.color)可能会有所不同。例如:
代码在这里:
$(function(){
$('#container')。highcharts( {
图:{
type:'bar',
height:700
},
xAxis:{
categories:['Jan','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
},
plotOptions:{
bar:{
stacking:'normal',
pointPadding:0,
groupPadding:0.2,
dataLabels:{
启用:true,
颜色:'black',
align:right,
格式:'{y} M',
里面:false,
style :{
fontWeight:'bold'
},
verticalAl ign:中间
},
}
},
系列:[{
数据:[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颜色。例如: http://jsfiddle.net/Yrygy/176/
formatter:function(){
var max = this.series.yAxis.max,
color = this.y / max< ; 0.05? '黑,白'; // 5%width
return'< span style =color:'+ color +'>'+ this.y +'M< / span>';
},
您也可以将点的宽度与y值字符串的长度进行比较。 / p>
I'm wondering that the color of the text which is inside the bar chart(plotOptions.bar.dataLabels.color) can be different if the text doesn't fit to bar length. For instance:
Code is here:
$(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]
}]
});
});
Thanks in advance
解决方案
Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. For example: http://jsfiddle.net/Yrygy/176/
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<span style="color: ' + color + '">' + this.y + ' M</span>';
},
You can also compare point's width with length of y-value string.
这篇关于Highchart中的酒吧内外数据标签的颜色可以不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文