仅绘制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中的部分数据

回答

相关问题