Question

我有一个散点图。.我想在执行放大操作时过滤系列图例..因此，其数据点落在缩放区域中的系列应仅出现在图例中。单击重置缩放按钮时，该按钮应该重置。我开始在此提琴http://jsfiddle.net/ps1myxtk/上尝试尝试，但不知道是否有设置可以实现

zoomType: 'xy

在某个地方可以实现这一目标吗？

我在后台也有4个象限。.我想放大该象限。最好的方法是什么？我应该在象限上使用向下钻取吗？代替区域序列作为象限，我可以使用堆积柱系列作为象限..启用数据标签并单击数据标签时进行下钻吗？就像这里的http://jsfiddle.net/ps1myxtk/1/（Bdw，为什么0.5标签在这里中间没有对齐？）

还是我应该继续区域序列为每个象限创建一个SVG标签，然后单击它执行类似于我执行缩放时所期望的滤波操作？

我在这里http://jsfiddle.net/ps1myxtk/3/还有另一个小提琴，但是我无法通过图例过滤进行下潜/放大

有时会有很多灵活性，这些灵活性有时是无法克服的。.某些专家能否请我帮忙，并创建一个使用最佳技术的小提琴实例来达到目标？这个想法是使用已经可用的东西，而不是重新发明和编写不必要的功能

谢谢

Answer 1

在redraw事件中，您可以遍历所有点并检查isInside属性。根据结果，您可以在系列上设置一些自定义标志，运行legend.update()并在afterGetAllItems事件函数中删除指定的系列：

(function(H) {
    H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
        var allItems = e.allItems,
            index = allItems.length - 1;

        if (this.chart.rendered) {
            while (index > -1) {
                if (!allItems[index].isInVisibleRange) {
                    H.erase(allItems, allItems[index]);
                }
                index--;
            }
        }
    });
}(Highcharts));



Highcharts.chart({
    chart: {
        renderTo: 'container',
        type: 'scatter',
        zoomType: 'xy',
        events: {
            redraw: function() {
                var series = this.series;
                this.rendered = true;

                if (allowChartUpdate) {
                    allowChartUpdate = false;

                    if (this.resetZoomButton) {
                        series.forEach(function(s) {
                            s.isInVisibleRange = false;

                            s.points.forEach(function(p) {
                                if (p.isInside) {
                                    s.isInVisibleRange = true;
                                }
                            });
                        });

                    } else {
                        series.forEach(function(s) {
                            s.isInVisibleRange = true;
                        });
                    }

                    this.legend.update({});
                }

                allowChartUpdate = true;
            }
        }
    },

    ...
});

要放大到某个象限，请使用setExtremes方法：

document.getElementById('zoom').addEventListener('click', function() {
    chart.showResetZoom();
    chart.xAxis[0].setExtremes(0.5, 1, false);
    chart.yAxis[0].setExtremes(0.5, 1);
});

实时演示： http://jsfiddle.net/BlackLabel/fh614gkv/

API参考： https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

文档： https://www.highcharts.com/docs/extending-highcharts

缩放时的散点图过滤器图例

1 个答案: