Question

在Highcharts中，有一个很好的功能来缩放和窗格区域。但是为了使用平移 - 它应该与此处示例中提到的shift键组合使用。有没有办法在放大时显示滚动条而不是平移？

Answer 1

您可以使用渲染器并使用它制作自定义滚动条： http://api.highcharts.com/highcharts#Renderer.rect

您可以制作两个矩形，一个用于滚动条背景，另一个用于滚动按钮。

您可以使用attr（）更改其属性： http://api.highcharts.com/highcharts#Element.attr

chart.renderer.rect(0, height - 60, width, 20)
      .attr({
        fill: '#666',
        zIndex: 3,
        visibility: 'hidden'
      }).addClass('scroll')
      .add();

您可以使用afterSetExtremes事件，在其回调函数中，您可以通过重置缩放按钮的可见性连接滚动条的可见性： http://api.highcharts.com/highcharts#xAxis.events.afterSetExtremes

您需要计算滚动条的宽度和x位置。您可以通过轴min的简单数学比例以及图表的最大和宽度来实现。例如，您可以在重绘事件回调函数中设置宽度：

    redraw: function() {
      var chart = this;
      this.xAxis[0].displayBtn ? ($('.scrollBar').show() && $('.scroll').show()) : ($('.scrollBar').hide() && $('.scroll').hide())
      width = chart.chartWidth;
      newWidth = width * (max - min) / (oldMax - oldMin);
      $('.scroll').attr({
        width: width
      });
      $('.scrollBar').attr({
        width: newWidth,
        x: width * min / oldMax,
      });
    }

您需要将mousedown和mousemove事件添加到滚动条。你可以使用jQuery来做到这一点。在mousemove事件中，您需要根据鼠标位置重新计算滚动按钮的x位置：

$('.scrollBar').on('mousedown', function() {
        var mousePos;
        $(this).bind('mousemove', function(e) {
          $(this).attr({
            x: e.clientX + 70,
          })
          chart.xAxis[0].setExtremes(min - ((mousePos || e.clientX) - e.clientX) * oldMax / width, max - ((mousePos || e.clientX) - e.clientX) * oldMax / width, true, false);
          mousePos = e.clientX;

        });
      })

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/LnneuLoy/8/

亲切的问候。

Highcharts用滚动条缩放

1 个答案: