Question

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

图表按预期加载和渲染。

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

当用户放大完整图形的一部分时，选择事件会将数据集更改为更大的完整数据集，以便显示先前隐藏在默认数据集中的任何点。这完全符合预期。

这是问题所在：

当用户尝试放大图表的一小部分时，从靠近边缘开始并移动到边缘，特别是如果选择中只有一个气泡，图形将缩放X和Y，不只是X.我将zoomtype设置为'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
        }]
    });
})();

以下是此问题的解答：https://jsfiddle.net/emergingdzns/8dfuga09/

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

Answer 1

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

对于你的小提琴，我在x轴上添加了以下内容：

minRange: 1000 * 60 * 60 * 24 * 7

这将允许用户放大，直到图表上只有七天可见（例如，10月10日到9月16日）。您可以将此设置为您喜欢的任何值，以便根据需要为您提供细化，并且希望有助于解决您的泡沫在下降的问题。离开图表。

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

在Highcharts中，将一个小选区缩放到边缘，当zoomtype = x时缩放x和y

1 个答案: