highcharts - Highchartsでデータの一部のみを描画する

Question

面グラフでデータセットの一部のみを描画する方法を探しています。チャートの上にスライダーがあり、チャート内の1つのシリーズの範囲を制限し、他のスタイルを全体としてレンダリングできます。これを行うための最良の方法は何だろうか。現時点での唯一のアイデアは、スライダーが移動するたびにグラフを再描画することですが、これによりパフォーマンスが低下する可能性があります。たぶん、これはSVG要素のマスクのようなもので行うことができます。

score 4 · Accepted Answer

クリップパスでsvgグラフをクリップするだけで、簡単な解決策を思いつきました。

    //var chart is the actual HighChartsInstance;
    var renderer = chart.renderer;
    var group = renderer.g().add();
    var clipPath = renderer.createElement("clipPath");

    clipPath.element.id = 'clip';
    var rect = renderer.rect(0, 0, 200, 400).add(clipPath);
    this.clippingMask = rect.element; //reference to the clipping rect which width is changed by the slider

    clipPath.add(group);
    chart.series[1].group.element.setAttribute('clip-path', "url(#clip)");
    chart.series[1].group.element.childNodes[0].setAttribute('clip-path', "url(#clip)");

score 0 · Accepted Answer

いくつかの方法があります

「スライダー」を含むhighstockを使用するhttp://www.highcharts.com/stock/demo/
スクローラーhttp://jsfiddle.net/UCmUx/でhighstock.jsとhighchartsチャートを使用します
```
scrollbar:{
        enabled:true
    },
```
スクローラーなしでhighchartsチャートを使用するhttp://jsfiddle.net/UCmUx/1/そして、独自のスクローラーを移動する場合は、setExtremes（）http://api.highcharts.com/highcharts#Axis.setExtremes（）を使用します。

score 0 · Accepted Answer

1つのオプションは、制限する系列データを変更してから、次のように呼び出すことだと思います。

 chart.series[n].setData(newData);

ここで、「n」は切り捨てるシリーズの番号です。newDataは、不要なポイントが削除された系列データのコピーです。正しい位置にプロットするには、シリーズのx値とy値を指定する必要があります。

highcharts - Highchartsでデータの一部のみを描画する

3 に答える 3

Related

Reference