Highcharts xrange chartType を使用してタイムライン ウィジェットを実装しようとしています。
基本的な構造は YAxis Categories : Agent Name 、X Axis Timeline data for Online/Offline/Break/etc
YAxis ラベルが各カテゴリの実際の Bar と一致しないことがわかりました。オンラインで見つけた 2 つの解決策は、pointPadding/groupPadding を使用することで、バーが見えなくなるほど細くなります。別の方法は、pointWidth 20 を定義して各バーを確実に表示できるようにすることですが、重なっているバーを保護することはできません... LAME ですが、YAxis スクロールバーを追加することで解決されますが、ラベルがバーの中間にある場合があることは解決されません。など
jsfiddle bc で複製するのはちょっと難しいです。私の製品では動的にサイズ変更されるのではなく、静的にサイズ変更されたグラフですが、これは私の現在の状態の良い例です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'
},