放大和缩小按钮 - 高图

Question

我在气泡图中有自定义缩放按钮（放大，缩小）。当用户单击放大按钮时，缩放应该在图表中从左到右发生。类似地，缩小应该以这种方式发生，这与缩小立即发生的重置缩放功能相反。

小提琴链接：https://jsfiddle.net/abcdlearner/dz4awe0y/ /** * A Highcharts插件在图表的 *边界框以外的单独的容器显示工具提示，以便它可以利用在网页中所有可用空间。 */

(function(H) { 
    H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) { 

    var chart = this.chart, 
     options = this.options, 
     chartRenderer = chart.renderer, 
     box; 

    if (!this.label) { 

     this.renderer = new H.Renderer(document.body, 0, 0); 
     box = this.renderer.boxWrapper; 
     box.css({ 
     position: 'absolute', 
     top: '-9999px' 
     }); 
     chart.renderer = this.renderer; 
     proceed.call(this, chart, options); 
     chart.renderer = chartRenderer; 

     this.label.attr({ 
     x: 0, 
     y: 0 
     }); 
     this.label.xSetter = function(value) { 
     box.element.style.left = value + 'px'; 
     }; 
     this.label.ySetter = function(value) { 
     box.element.style.top = value + 'px'; 
     }; 
    } 
    return this.label; 
    }); 

    H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) { 
    var chart = this.chart, 
     chartWidth = chart.chartWidth, 
     chartHeight = chart.chartHeight, 
     chartPlotWidth = chart.plotWidth, 
     chartPlotHeight = chart.plotHeight, 
     pos; 
    point.plotX += this.chart.pointer.chartPosition.left; 
    point.plotY += this.chart.pointer.chartPosition.top; 

    // Temporary set the chart size to the full document, so that the tooltip positioner picks it up 
    chart.chartWidth = $(window).width(); 
    chart.plotWidth += chart.chartWidth - chartWidth; 
    chart.chartHeight = $(document).height(); 
    chart.plotHeight += chart.chartHeight - chartHeight; 

    var pos = proceed.call(this, boxWidth, boxHeight, point); 

    chart.chartWidth = chartWidth; 
    chart.plotWidth = chartPlotWidth; 
    chart.chartHeight = chartHeight; 
    chart.plotHeight = chartPlotHeight; 

    return pos; 
    }); 

    /** 
    * Find the new position and perform the move. This override is identical 
    * to the core function, except the anchorX and anchorY arguments to move(). 
    */ 
    H.Tooltip.prototype.updatePosition = function(point) { 
    var chart = this.chart, 
     label = this.label, 
     pos = (this.options.positioner || this.getPosition).call(
     this, 
     label.width, 
     label.height, 
     point 
    ); 

    // Set the renderer size dynamically to prevent document size to change 
    this.renderer.setSize(
     label.width + (this.options.borderWidth || 0), 
     label.height + this.distance, 
     false 
    ); 

    // do the move 
    this.move(
     Math.round(pos.x), 
     Math.round(pos.y || 0), // can be undefined (#3977) 
     point.plotX + chart.plotLeft - pos.x, 
     point.plotY + chart.plotTop - pos.y 
    ); 
    }; 

}(Highcharts)); 


$('.container').each(function(i, v) { 
    $(v).highcharts({ 

    chart: { 
     type: 'column', 
     inverted: true, 
     borderWidth: 1 
    }, 

    title: { 
     text: 'Tooltip outside the box' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr'] 
    }, 

    legend: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Really, really long series name 1', 
     data: [1, 4, 2, 3] 
    }, { 
     name: 'Really, really long series name 2', 
     data: [4, 2, 5, 3] 
    }, { 
     name: 'Really, really long series name 2', 
     data: [6, 5, 3, 1] 
    }, { 
     name: 'Really, really long series name 2', 
     data: [6, 4, 2, 1] 
    }] 

    }) 
}); 

Answer 1

使用axis.setExtremes()方法放大到一个特定的区域。

$('#zoom').click(function() { 
    chart.xAxis[0].setExtremes(1327449600000,1422144000000, false) 
    chart.yAxis[0].setExtremes(10, 20) 

例如https://jsfiddle.net/nhajopys/