0

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'
    },

yAxis とデータのずれの例

4

2 に答える 2