javascript - 在 Highcharts 中，将小选区放大到边缘，当 Zoomtype = x 时会同时缩放 x 和 y

Question

我正在创建一个气泡图，该图在一段时间内具有 x 轴。气泡根据 y 轴填充，并根据图形数据中的 z 值调整大小。

图表按预期加载和渲染。

我有两组数据。一组包含从我们系统中的查询返回的所有数据点。第二个数据集(这是加载图表时的默认设置)具有较少数量的项目，构成最大的 45 个项目(基于 z 值)。

当用户放大整个图表的一部分时，选择事件会将数据集更改为更大的完整数据集，以便以前隐藏在默认数据集中的任何点都将被暴露。这正如预期的那样完美地工作。

问题是这样的:

当用户尝试放大图表的一小部分时，从边缘附近开始并移动到边缘，特别是如果选择中只有一个气泡，图表将同时缩放 X 和 Y，不仅仅是X。我将缩放类型设置为“x”，如果您缩放图表的中心，它只会放大x 轴。 y 轴保持固定。

这是来自 jsfiddle 的图表代码(数据集位于下面的 jsfiddle 链接中):

(function() {
    Highcharts.setOptions({
        global: {
            useUTC: true,
            timezoneOffset: 480         },
        lang: {
            contextButtonTitle: 'Chart Download and Print',
        }
    });

    $('#visual_1').highcharts({
        chart: {
            type: 'bubble',
            zoomType: 'x',
            height: 400,
            events: {
                selection: function(event) {
                    if (typeof event.xAxis !== "undefined") {
                        if (event.xAxis[0].min > event.xAxis[0].axis.dataMin ||
                            event.xAxis[0].max < event.xAxis[0].axis.dataMax) {
                                var bigChart = $('#visual_1').highcharts();
                                bigChart.series[0].setData(zoomChartData);
                                bigChart.yAxis[0] = orgChartYaxis;
                        }
                    } else {
                        var bigChart = $('#visual_1').highcharts();
                        bigChart.series[0].setData(graphData);
                    }
                }
            },
        },
        legend: {
            enabled: false
        },
        title: {
            useHTML: true,
            text: 'Influence last 52 weeks'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b %e',
                year: '%b'
            },
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            startOnTick: false,
            endOnTick: false,
            labels: {
                enabled: false
            },
            gridLineColor: '#DDDDDD',
            gridLineDashStyle: 'ShortDot',
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.label}',
                    allowOverlap: false,
                    crop: false,
                    overflow: 'none'
                }
            },
            bubble: {
                minSize: 8,
                maxSize: 100
            }
        },
        series: [{
            data: graphData
        }]
    });
})();

这是这个问题的jsfiddle:https://jsfiddle.net/emergingdzns/8dfuga09/

请参阅下面的屏幕截图，我在 jsfiddle 中向您展示如何复制此问题。

Answer 1

此问题的一种可能解决方案是为 x 轴设置 minRange(请参阅 http://api.highcharts.com/highcharts#xAxis.minRange )。这样做的目的是强制用户可以缩放到的绝对最小间隔。

对于你的 fiddle ，我将以下内容添加到 x 轴:

minRange: 1000 * 60 * 60 * 24 * 7

这将允许用户放大，直到图表上仅可见 7 天(例如，9 月 10 日到 9 月 16 日)。您可以将其设置为任何您喜欢的值，以获得所需的粒度，并且有望帮助解决气泡从图表“掉落”的问题。

这是我的修订:https://jsfiddle.net/brightmatrix/8dfuga09/2/