在highcharts图表上滚动

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

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

我想要做的是防止图表采取任何事件，并显示任何被突出显示的图表，并且即使我在图上进行滚动，也能够滚动。

码：

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

为了跟进阅读这个问题及其答案的人们，滚动和Highcharts可视化问题已在3.0.1版本（2013-04-09）中解决。 Highcharts的兄弟Highstock收到了与版本1.3.1（2013-04-09）类似的更新。

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

Highcharts版本4.1.0（2015-02-16）进一步增强：

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

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

Answer 2

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

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; }