highcharts - Highcharts XRange 数据和标签错位
问题描述
我正在尝试使用 Highcharts xrange chartType 实现时间线小部件
基本结构是 YAxis Categories : Agent Name , X Axis Timeline data for Online/Offline/Break/etc
我发现 YAxis 标签与每个类别的实际 Bar 不对齐 - 我在网上找到的两个解决方案是使用 pointPadding/groupPadding ,这会导致条形太细以至于不可见。另一种方法是定义 pointWidth 20 以确保您可以看到每个条形但没有对重叠条形的保护... LAME 但通过添加 YAxis 滚动条解决了 - 但是这并不能解决有时标签在条形之间的中间等等等等
在 jsfiddle 中复制有点困难,因为它是一个静态大小的图表,而不是在我的产品中动态调整大小,但这是我当前状态的一个很好的例子https://jsfiddle.net/bj7y3dwv/5/#run
'yAxis': {
'categories': agents,
'min': 0,
'max': agents.length < maxY ? agents.length - 1 : maxY,
'scrollbar': {
'enabled': true,
'showFull': false,
'barBackgroundColor': '#ccc',
'barBorderRadius': 7,
'barBorderWidth': 0,
'buttonBorderWidth': 0,
'buttonArrowColor': 'transparent',
'buttonBackgroundColor': 'transparent',
'rifleColor': 'transparent',
'trackBackgroundColor': '#F3F3F3',
'trackBorderColor': 'transparent',
'height': 10,
'minWidth': 25
},
'reversed': true,
'tickmarkPlacement': 'on',
'gridLineColor': 'transparent'
},
解决方案
刚设置dataLabels.overflow = 'allow'
。默认值为“justify”,它在绘图区域内对齐标签。
代码:
series: [{
data: [{
...
}],
dataLabels: {
enabled: true,
overflow: 'allow',
crop: true
}
}]
演示:
推荐阅读
- java - 之前使用证书身份验证的 servlet 已更改,现在正在引发异常
- javascript - 导航栏按钮在 Gatsby 和 TypeScript 的生产环境中不起作用
- ansible - 使用带有 Ansible 的分隔符从字符串列表创建字典
- c# - 对象与目标类型不匹配 PropertyInfo.GetValue()
- c# - 请求失败状态代码 200 状态文本 BADRESPONSE:意外令牌“<”
- javascript - 无法解决对 Express API 的 AJAX 调用的 CORS 错误
- nginx - 音频和视频不同步流式 USB 网络摄像头到 RTMP 服务器
- .net - 如何在 .Net MVC 上查看刷新时的反应变化?
- npm - 如何在 Visual Studio Code 上安装 discord.js?
- c# - 找不到 System.Windows.Forms 程序集参考