僅繪製Highcharts中的部分數據

我正在尋找一種方法來繪製區域圖中的部分數據集。圖表上方有一個滑塊，可以限制圖表中一個系列的範圍，而其他的豎框整體呈現。我不知道最好的辦法是什麼。目前唯一的想法是每次移動滑塊時重新繪製圖表，但恐怕這可能會導致性能下降。也許這可以通過SVG元素上的掩碼來完成。僅繪製Highcharts中的部分數據

來源

2013-03-26 Andreas Köberle

我想出了通過只是一個夾路徑剪裁的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)");

來源

2013-03-26 15:09:19

偉大的解決方案！正是我在找什麼。是否有一些其他方法可以獲得對矩形的引用，而不是： this.clippingMask = rect.element; ？ – klodoma 2015-07-16 10:51:40

你有幾個方面

使用highstock其中包含「滑蓋」 http://www.highcharts.com/stock/demo/
使用highstock.js和highcharts圖表與滾輪http://jsfiddle.net/UCmUx/
```
scrollbar:{ 
     enabled:true 
    }, 
```
使用highcharts圖沒有滾動條http://jsfiddle.net/UCmUx/1/，並且在您移動自己的滾動條的情況下，然後使用set極端（）http://api.highcharts.com/highcharts#Axis.setExtremes()

來源

2013-03-26 09:13:50

看來我的問題是不夠清楚。我正在尋找一種方式，可以從一個系列中剪切部件，而其他系列則全部顯示。它應該將滑塊設置呈現給用戶。 – 2013-03-26 09:24:48

其他方式是在幻燈片使用setData（）或addPoint（）函數 http://api.highcharts.com/highcharts#Series.setData（） http://api.highcharts.com/highcharts#Series。 addPoint（） – 2013-03-26 13:20:22

我認爲一個選項是將修改你要限制的一系列數據，然後調用：

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

其中「n」是該系列你的數量截斷。 newData是系列數據的一個副本，帶有不需要的點。您需要指定序列中的x和y值，以便將其繪製在正確的位置。

來源

2013-03-26 09:36:18 SteveP

僅繪製Highcharts中的部分數據

回答

相關問題