2016-10-18 7 views
0

visjs棒グラフを1つのタイムスタンプの代わりに時間間隔で作成する方法/回避策はありますか?単一のタイムスタンプの代わりに時間間隔のVisjs棒グラフ

たとえば、10分間隔でバーを表示したいとします。棒グラフのデータを設定するための標準的な方法は、X軸上の単一の座標を持つ配列である:

var items = [ 
    {x: '2016-10-18 18:00:00', y: 10}, 
    {x: '2014-10-18 18:10:00', y: 8}, 
    {x: '2014-10-18 18:20:00', y: 9}, 
    {x: '2014-10-18 18:30:00', y: 5}, 
    ... 
] 

オプションで、我々は、次に、特定のスケール直下アラインメントと(例えば50個のピクセル)が大きいバー幅を設定した場合グラフがうまく表示されます。棒グラフが次のタイムスタンプに達すると、その幅は重ならずに縮小されます。ここでは、実際のバー幅はオプション

var options = { 
    style:'bar', 
    barChart: {width:50, align:'right'}, 
    drawPoints: false 
} 

graph with adjacent bars

しかし、グラフのスケールが変更された場合、いくつかの点棒で、この例ではない完全な間隔(10分間隔をカバーするが開始されますに設定された値未満であることに注意してください)。オプションで設定したバーの幅は、このスケールで、次の小節の先頭に到達していないので:

graph with not adjacent bars

私も大きな値にオプションでバーの幅を設定しようとしたが、いくつかの点でバーが重複起動:

graph with overlapping bars

改善のためにできることはありますか?

答えて

0

これは、アイテムに「終了」プロパティを追加することで実現できました(常に存在していたか、最近追加されたかはわかりません)。 endプロパティがアイテムに使用されて

var items = [ 
    {x: '2016-10-18 18:00:00', end: '2016-10-18 18:10:00', y: 10}, 
    {x: '2014-10-18 18:10:00', end: '2014-10-18 18:20:00', y: 8}, 
    {x: '2014-10-18 18:20:00', end: '2014-10-18 18:30:00', y: 9}, 
    {x: '2014-10-18 18:30:00', end: '2014-10-18 18:40:00', y: 5}, 
    ... 
] 

は、optionswidthプロパティは無視されます:10分間隔質問からアイテムがこのように構成する必要がありますを取得します。

関連する問題