Question

我正在寻找一种只在区域图表中绘制部分数据集的方法。图表上方有一个滑块，可以限制图表中一个系列的范围，而其他窗格则整体呈现。我想知道最好的方法是什么。目前唯一的想法是每次滑块移动时重绘图表，但我担心这会导致性能下降。也许这可以通过SVG元素上的掩码来完成。

Answer 1

我想出了一个简单的解决方案，只需用剪辑路径剪切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)");

Answer 2

你有几种方法

使用包含“slider”http://www.highcharts.com/stock/demo/
使用带滚动条http://jsfiddle.net/UCmUx/
的highstock.js和highcharts图表
```
scrollbar:{
        enabled:true
    },
```
使用不带滚动条http://jsfiddle.net/UCmUx/1/的高价图表，如果您移动自己的滚动条，则使用setExtremes（）http://api.highcharts.com/highcharts#Axis.setExtremes()

Answer 3

我认为一个选项是修改您要限制的系列数据，然后调用：

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

其中＆＃39; n＆＃39;是您要截断的系列的编号。 newData是系列数据的副本，其中包含不需要的点。您需要在系列中指定x和y值，以便将其绘制在正确的位置。

在Highcharts中仅绘制部分数据

3 个答案: