javascript 滚动 highcharts 图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12156245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling over highcharts graph
提问by Aatish Molasi
Here's my issue: I am using the phonegap framework to develop a hybrid app, and I need this application to have graphs for which I had decided to use the highcharts library.
这是我的问题：我正在使用 phonegap 框架来开发一个混合应用程序，我需要这个应用程序具有我决定使用 highcharts 库的图形。
The problem is that I can't seem to be able to scroll after touching on the chart (at least while touching inside the selected portion of the image).
问题是我似乎无法在触摸图表后滚动（至少在触摸图像的选定部分时）。
What I want to do is prevent the chart from taking any events and show a plain graph with anything being highlighted and be able to scroll even if im doing it over the graph.
我想要做的是阻止图表采取任何事件，并显示一个简单的图表，其中突出显示了任何内容，并且即使我在图表上进行滚动也能够滚动。
Code:
代码：
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]
}]
});
采纳答案by Mike Zavarello
To follow up for folks reading this question and its answers, the issue with scrolling and Highcharts visualizations was resolved with Version 3.0.1 (2013-04-09). Highstock, a sibling of Highcharts, received a similar update with Version 1.3.1 (2013-04-09).
为了跟进阅读此问题及其答案的人，滚动和 Highcharts 可视化问题已在 3.0.1 版 (2013-04-09) 中得到解决。Highstock 是 Highcharts 的兄弟，在版本 1.3.1 (2013-04-09) 中收到了类似的更新。
Added new option, tooltip.followTouchMove. When this is true, the tooltip can be moved by dragging a single finger across the chart, like in Highcharts 2. When it is false, dragging a single finger is ignored by the chart, and causes the whole page to scroll. This applies only when zooming is not enabled.
添加了新选项 tooltip.followTouchMove。如果为 true，则可以通过在图表上拖动单个手指来移动工具提示，就像在 Highcharts 2 中一样。如果为 false，拖动单个手指将被图表忽略，并导致整个页面滚动。这仅适用于未启用缩放的情况。
Further enhancements were made in Highcharts Version 4.1.0 (2015-02-16):
Highcharts 4.1.0 版 (2015-02-16) 进一步增强：
Made tooltip.followTouchMove true by default, and allowed page scroll at the same time.
使 tooltip.followTouchMove 默认为 true，同时允许页面滚动。
For the complete Highcharts change log, see http://www.highcharts.com/documentation/changelog.
有关完整的 Highcharts 更改日志，请参阅http://www.highcharts.com/documentation/changelog。
回答by Aatish Molasi
回答by Jared Hales
The problem is caused by Highcharts capturing all touch events and making them do nothing. I solved this by basically just overlaying a div over the chart area on mobile devices and preventing those events from reaching highcharts elements (so they are free to trigger default behavior, i.e. page scrolling). I used this JS (assuming you are also using JQuery or equivalent):
问题是由 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();
});
});
The elements added would need to be styled to overlay the chart, I did that like so:
添加的元素需要设置样式以覆盖图表，我是这样做的：
.highcharts-container .chart-drag-handle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 100;
}
