ハイチャート - 第3要素によるナビゲーションがプロット内に「非表示」

Question

私はこの形式（速度、頻度、日付）の情報を持っています。何が起こるかは、速度xの周波数でこのグラフをプロットする必要がありますが、ユーザーがグラフに表示されていない日付までにナビゲーションフィルタリングを使用できるようにしたいとします。

また、私は速度x周波数の限界である動的に構築されていないいくつかの情報を持っています。この情報は、プロット上の参照点として固定されます。したがって、私がプロット情報（限界ではない）をフィルタリングするとき、常にこれらの限界プロットを表示しなければなりません。

このグラフでは、領域プロットにはポイントの制限（速度、頻度）が表示されます。次に、速度xの周波数（x date）のポイントを追加し、日付でフィルタリングします。

皆さん、私にこれに関するアドバイスをいただけますか？ここで

はみんな、直列に配列の各要素は、3つの要素[A、B、C]を持っている旨の通知は、第1の（c）と仮定JSFIDDLE

JSFIDDLE

data: [ 
       [0, 20, here is a date], [10, 20,here is a date], 
       [50, 39.9994, here is a date], [100,49.7494, here is a date] 
      ], 

ありますDATEであり、今のところ乱数ではありません。私は、このC要素でこのシリーズをフィルタリングするためにコメント付きのナビゲータコードを使用できるようにしたいと考えています。実際には表示されているチャートには表示されません。

Answer 1

同じグラフにナビゲータが必要な場合は少し難しいでしょう。ナビゲータは日時データでのみ機能し、メインのグラフから軸に接続する必要があります。

だから、あなたはその形式のデータを持っている：

var points = [ 
    [5, 9, Date.UTC(2016, 1, 0)], 
    [65, 6, Date.UTC(2016, 1, 1)], 
    ... 

次の2つのx軸必要 - ナビゲーターに接続されたデータや他のものを表しています。第2の軸は、ナビゲータで動作するように表示されていなければならず、datetimeデータと接続する必要があります。

これで、2つのx軸を除いて、実際のデータを持つ2つの系列と、最初の系列の値が[date, y]となっています。追加のデータはナビゲータに表示されます。ナビゲータでは散布図を使用できないため、ラインシリーズに変換されます。エラーなしでデータを表示するには、データを日付順にソートする必要があります。

series: [{ 
    id: 'main-series', 
    data: points.map(function(point) { 
    return [point[0], point[1], point[2], point[1]] 
    }), 
    showInNavigator: false, 
    xAxis: 1, 
    keys: ['x', 'y', 'date', 'holdY'] //holdY is for easier hiding points 
}, { 
    xAxis: 0, 
    data: points.map(function(point) { 
    return [point[2], point[1]]; 
    }), 
    showInNavigator: true, 
    enableMouseTracking: false, 
    color: 'transparent', 
    showInLegend: false 
}], 

xAxis: [{ 
    minRange: 1000 * 3600 * 24, 
    type: 'datetime', 
    tickLength: 0, 
    tickLength: 0, 
    labels: { 
    enabled: false 
    }, 
}, { 
    type: 'linear' 
}], 

最後に、ナビゲータの極端な点を表示/非表示にするコールバックが必要です。非表示/表示は、日付である第3ポイントのプロパティに依存します。特定のポイントを非表示にするAPIはありませんが、ポイントの値をnullに設定することで実現できます（つまり、実際のyをholdYに保存しています）。

events: { 
    afterSetExtremes: function(e) { 
    var points = this.chart.get('main-series').points; 
    points.forEach(function(point) { 
     point.update({ 
     y: e.min <= point.date && point.date <= e.max ? point.holdY : null 
     }, false, false); 
    }); 
    this.chart.redraw(); 
    } 
} 

例：https://jsfiddle.net/3wuwdonn/1/

私は、あなたがメインチャートの第2のX軸とシリーズを必要としない、別のチャートとしてナビゲータを使用して検討すると、あなたはそれらを作るために必要はありません見えない。ナビゲーターと

例ここでしかチャート：http://jsfiddle.net/f7Y9p/