gpt4 book ai didi

javascript - 如何在条形图中强制显示 yAxis 上的每个标签

转载 作者:行者123 更新时间:2023-11-30 16:41:52 28 4
gpt4 key购买 nike

我对 Highcharts 有疑问。

我想显示每个 yAxis 标签,但默认情况下 Highcharts 隐藏我一半的标签。

图形的高度是固定的,类别的数量是可变的,因此增加高度不是解决方案。

我有一个技巧可以做到,但我发现它很脏:

我可以在轴中添加这个:

tickPositions: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21, 22,23,24,25]

但我试图找到更好的方法。

这是一个 example和我的代码:

$(function () {
$('#container').highcharts({
chart : {
type : "bar",
backgroundColor : null,
borderColor : "#000000",
borderWidth : 0,
options3d : {
enabled : false
}
},
plotOptions : {
bar : {}

},
credits : {
enabled : false
},
colors : ["#5B9BD5", "#ED7D31", "#A5A5A5", "#FFC000", "#70AD47", "#4472C4"],
title : {
align : "center",
useHTML : true,
text : ""
},
subtitle : {
align : "center",
useHTML : true,
text : ""
},
legend : {
align : "center",
borderColor : "#000000",
borderWidth : 0,
enabled : false,
floating : false,
layout : "vertical",
itemStyle : {
color : "#000000",
fontWeight : "normal",
fontStyle : "normal",
textDecoration : "none",
fontFamily : "Arial, Helvetica, sans-serif",
fontSize : "11px"
},
shadow : false,
verticalAlign : "bottom"
},
yAxis : {

gridLineWidth : 1,
gridLineColor : "#CECECE",
labels : {
enabled : true,
style : {
color : "#000000",
fontWeight : "normal",
fontStyle : "normal",
textDecoration : "none",
fontFamily : "Arial, Helvetica, sans-serif",
fontSize : "11px"
}
},
lineWidth : 0,
title : {
text : ""
}
},
xAxis : {
gridLineWidth : 0,
gridLineColor : "#CECECE",
labels : {
enabled : true,
style : {
color : "#000000",
fontWeight : "normal",
fontStyle : "normal",
textDecoration : "none",
fontFamily : "Arial, Helvetica, sans-serif",
fontSize : "11px"
}
},
lineWidth : 1,
title : {
text : ""
},
tickLength : 10,
categories : ["Lorem","ipsum","dolor","sit","amet,","consectetur","adipiscing","elit.","Etiam","sit","amet","vulputate","erat.","Ut","ultrices,","magna","luctus","elementum","hendrerit,","diam","erat","placerat","eros,","ac","sagittis"]
},
series : [{
name : "etab",
type : "bar",
data : [2,10,11,29,56,3,10,40,6,25,28,17,19,7,27,7,14,46,20,49,3,13,3,31,12,13],
dataLabels : {
enabled : true,
inside : false,
style : {
color : "#000000",
fontWeight : "normal",
fontStyle : "normal",
textDecoration : "none",
fontFamily : "Arial, Helvetica, sans-serif",
fontSize : "11px"
},
formatter : function () {
return this.y + ""
}
},
colorByPoint : true,
zIndex : 1
}
]
});});

最佳答案

对于条形标签,只需添加allowOverlap: true,,就像这样

 dataLabels : {
allowOverlap: true,
...

文档引用 - http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.allowOverlap


fiddle - http://jsfiddle.net/ezjm3dch/


对于 y 轴标签,您必须像这样减小 xAxis 字体大小

xAxis : {
...
labels : {
....
style : {
...
fontSize : "8px"

对于较大的字体大小,轴标签会自动调整,使中间的标签消失以避免任何重叠 - 我没有看到任何要显示的选项


fiddle - http://jsfiddle.net/jwu1b5jx/

关于javascript - 如何在条形图中强制显示 yAxis 上的每个标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31832989/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com