放大和缩小按钮 - highcharts

Question

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

Fiddle link: https://jsfiddle.net/abcdlearner/dz4awe0y/ /** * 一个 Highcharts 插件，用于在图表外的单独容器中显示工具提示 * 边界框，以便它可以利用页面中所有可用的 space。 */

(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/

放大和缩小按钮 - highcharts

Zoom In & Zoom Out buttons - highcharts

zooming

highcharts