1

我正在寻找一种仅在面积图中绘制部分数据集的方法。图表上方有一个滑块,可以限制图表中一个系列的范围,而另一个阶梯则整体呈现。我想知道最好的方法是什么。目前唯一的想法是每次滑块移动时重新绘制图表,但我担心这可能会导致性能下降。也许这可以通过 SVG 元素上的掩码之类的东西来完成。

4

3 回答 3

4

我想出了一个简单的解决方案,只需使用剪辑路径剪辑 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-26T15:09:19.110 回答
0

你有几种方法

于 2013-03-26T09:13:50.970 回答
0

我认为一种选择是修改要限制的系列数据,然后调用:

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

其中 'n' 是您要截断的系列的编号。newData 是除去不需要的点的系列数据的副本。您需要在系列中指定 x 和 y 值,以便将其绘制在正确的位置。

于 2013-03-26T09:36:18.140 回答