javascript - 滚动 highcharts 图表

Question

这是我的问题：我正在使用 phonegap 框架开发一个混合应用程序，并且我需要这个应用程序具有我决定使用 highcharts 库的图表。

问题是我在触摸图表后似乎无法滚动（至少在触摸图像的选定部分时）。

我想要做的是防止图表发生任何事件并显示一个简单的图表，其中任何内容都被突出显示并且即使我在图表上执行它也能够滚动。

代码：

chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'containerBar',
    animation: false,
    type: 'bar',
    events: {
      click: function(event){
        return false;
      }
    }
  },
  scrollbar: {
    enabled: true
  },
  title: {
    text: 'Fruit Consumption'
  },
  plotOptions: {
    bar: {
      events: {
        click: function(event){
          return false;
        },
        mouseOver: function(event){
          return false;           
        },
        legendItemClick: function () {
          return false;
        }
      },
      states: {
        hover: function(){
          alert("Allow");
        }
      }
    }
  },
  events: {
    click: function(e) {
      alert("Click");
    }  
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Jane',
    data: [1, 3, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

Answer 1

试试这个链接....只需制作一个单独的 javascript 文件，复制粘贴代码并包含该文件

Answer 2

为了跟进阅读此问题及其答案的人们，滚动和 Highcharts 可视化的问题已在版本 3.0.1 (2013-04-09) 中得到解决。Highstock 是 Highcharts 的兄弟姐妹，在 1.3.1 版 (2013-04-09) 中收到了类似的更新。

添加了新选项 tooltip.followTouchMove。如果为真，则可以通过在图表上拖动单个手指来移动工具提示，就像在 Highcharts 2 中一样。如果为假，则拖动单个手指会被图表忽略，并导致整个页面滚动。这仅在未启用缩放时适用。

在 Highcharts 版本 4.1.0 (2015-02-16) 中进行了进一步的增强：

使 tooltip.followTouchMove 默认为真，同时允许页面滚动。

有关完整的 Highcharts 更改日志，请参阅http://www.highcharts.com/documentation/changelog。

Answer 3

问题是由 Highcharts 捕获所有触摸事件并让它们什么都不做引起的。我基本上只是通过在移动设备上的图表区域上覆盖一个 div 并防止这些事件到达 highcharts 元素来解决这个问题（因此它们可以自由触发默认行为，即页面滚动）。我使用了这个 JS（假设你也在使用 JQuery 或等效的）：

$('.highcharts-container').each(function() {
  var dragHandle;
  dragHandle = $('<div class="chart-drag-handle">');
  $(this).append(dragHandle);
  dragHandle.on('touchstart', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchmove', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchend', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchcancel', function(e) {
    e.stopPropagation();
  });
});

添加的元素需要设置样式以覆盖图表，我是这样做的：

.highcharts-container .chart-drag-handle {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 100;
}