highcharts - Hicharts xrange bar height 0 for larger data sets
问题描述
I have an xrange graph where each 'Agent' has a series of Timeline Data, i am having several problems getting the out of the box attributes to format the graph data appropriately. For instance when there are many Series / Y categories the bar height on any given point element is 0; or when there are few enough to actually get a height they aren't centered in the category
is getting a height of 0, this can be solved by using the pointWidth attribute but my GOAL is to use the pointPadding and groupPadding attributes to center the bar && label within the category / Agent section - one would think this would be an easy task and the fiddle https://jsfiddle.net/yd7ujvfs/ shows an ideal end w/ maybe a minWidth if possible
in order to replicate my problem in a jsfiddle i stringified my chart definition and loaded it onto the jsfiddle here https://jsfiddle.net/0yeu4bg6/4/ which shows the height 0 problem
Additionally i'd like to handle the few agents case and more perfectly center the bar within the category as shown in this jsfiddle https://jsfiddle.net/5kowvgz3/5/
Thank you in advance for your assistance!
Examples: I've tried fiddling with the pointPadding, groupPadding solution vs the pointWidth solution, additionally i've tried to fiddle with the label placement and aligning it to the bar instead of visa versa. Additionally i've experimented with pointPlacement but no joy there
plotOptions: {
series: {
minPointLength: 10,
borderRadius: 0,
pointPadding: 0,
groupPadding: .25
}
},
{
name: "Adam NonSDX x",
id: 1003043,
data: [
{
y: 0,
agentDisplayName: "Adam NonSDX x",
tooltipDisplay: "Mon, Apr 1 1:14 PM - 2:59 PM",
name: "Available",
x: 1554142440000,
x2: 1554148752857,
color: "#97e34c"
},
...
pointPlacement: "on",
dataLabels: {
enabled: false
}
}
Expected results, Perfectly centered Axis Label and Bar within each category, Ideally a set px for each category like 35 px where there is 10px of padding on top and bottom and the label and bar are the middle 25px
actual results, Labels perfectly centered but bar is inconsistently placed, additionally at larger data sets bar is not visible because height is getting set to 0
解决方案
Highcharts reserves space for each series in each category. To prevent that disable grouping
option:
plotOptions: {
series: {
grouping: false,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/xpztou4g/
API Reference: https://api.highcharts.com/highcharts/plotOptions.xrange.grouping
推荐阅读
- java - 使用maven构建的jboss服务器中的.war文件的角度路由问题
- docker - Docker 无法协调 Kubernetes 插件组件的状态
- php - 如何将数据存储到数据库中?(一对一关系 Laravel)
- symfony-3.4 - NelmioApiDocBundle 不起作用“规范中没有定义操作!” Symfony 3.4
- mysql - 如何在我的 RaspberryPi 上设置 gammu-smsd.service
- excel - 单击另一个单元格并进行其他一些修改更改后,我需要在上一个单元格上运行宏
- android - Android Studio 错误 FAILURE:构建失败并出现异常
- android - 设置 android studio logcat 过滤器只显示异常和自定义日志
- cordova - 为什么 Android WebView 在未卸载时会发送“beforeunload”事件?
- ms-access - Microsoft Access 子窗体在实际更新数据之前作为沙箱