我正在寻找一种仅在面积图中绘制部分数据集的方法。图表上方有一个滑块,可以限制图表中一个系列的范围,而另一个阶梯则整体呈现。我想知道最好的方法是什么。目前唯一的想法是每次滑块移动时重新绘制图表,但我担心这可能会导致性能下降。也许这可以通过 SVG 元素上的掩码之类的东西来完成。
问问题
1074 次
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
你有几种方法
使用包含“滑块”的 highstock http://www.highcharts.com/stock/demo/
使用带有滚动条的 highstock.js 和 highcharts 图表http://jsfiddle.net/UCmUx/
scrollbar:{ enabled:true },
使用不带滚动条的 highcharts 图表http://jsfiddle.net/UCmUx/1/如果您移动自己的滚动条,请使用 setExtremes() http://api.highcharts.com/highcharts#Axis.setExtremes()
于 2013-03-26T09:13:50.970 回答
0
我认为一种选择是修改要限制的系列数据,然后调用:
chart.series[n].setData(newData);
其中 'n' 是您要截断的系列的编号。newData 是除去不需要的点的系列数据的副本。您需要在系列中指定 x 和 y 值,以便将其绘制在正确的位置。
于 2013-03-26T09:36:18.140 回答