Javascript 在散点图的工具提示中滚动鼠标时禁用缩放

我有一个散点图在我的网页，它呈现得非常好。问题是当我在工具提示区域内滚动鼠标时，图表缩放功能正在执行。我需要把这个禁用。但我不想完全禁用图表的缩放功能，因为需求说明需要放大图表，以便在有重叠点时查看点信息。请问有什么帮助吗？或者有人知道如何使用javascript手动查找zoomtype属性吗？我试着用firebug找到它，但没有用

//代码示例

var data = [
  [1, 1],
  [2, 2],
  [3, 3],
  [4, 4]
];
var chartingOptions = {
  chart: {
    renderTo: 'container',
    zoomType: 'xy'
  },
  tooltip: {
    useHTML: true,
    shared:false,
    formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
  },
  series: [{
    type: 'scatter',
    name: 'serie',
    data: data
  }]
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
  chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

var data = [
  [1, 1],
  [2, 2],
  [3, 3],
  [4, 4]
];
var chartingOptions = {
  chart: {
    renderTo: 'container',
    zoomType: 'xy'
  },
  tooltip: {
    useHTML: true,
    shared:false,
    formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
  },
  series: [{
    type: 'scatter',
    name: 'serie',
    data: data
  }]
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
  chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

var数据=[
[1, 1],
[2, 2],
[3, 3],
[4, 4]
];
var图表选项={
图表：{
renderTo:'容器'，
zoomType:'xy'
},
工具提示：{
是的，
分享：错，
格式化程序：函数（）{return'sdsd'}
},
系列：[{
键入：“散布”，
名称：'意甲'，
数据：数据
}]
};
chartingOptions=$.extend（{}，jugalsLib.getBasicChartOptions（），chartingOptions）；
var图表=新的Highcharts.chart（图表选项）；
var$tooltip=$（chart.tooltip.label.element）；
$tooltip.mouseup（函数（e）{
chart.tracker.selectionMarker=chart.tracker.selectionMarker.destroy（）；
});

您可以处理tooltip元素上的mouseup事件，并销毁此处理程序中的缩放选择元素。Highcharts使用此选择元素来决定是否需要缩放。这将欺骗highcharts，使其相信未选择任何内容

代码 这可能会有一些副作用，例如，如果您确实在缩放，并且您的缩放选择恰好在工具提示上结束，它将不会缩放。这可能是可以接受的，如果不是，您也可以找到一种解决方法，通过在上面的处理程序中进行更多的检查，看看它是否真的在缩放或类似的事情

演示

//代码示例

var data = [
  [1, 1],
  [2, 2],
  [3, 3],
  [4, 4]
];
var chartingOptions = {
  chart: {
    renderTo: 'container',
    zoomType: 'xy'
  },
  tooltip: {
    useHTML: true,
    shared:false,
    formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
  },
  series: [{
    type: 'scatter',
    name: 'serie',
    data: data
  }]
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
  chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

var data = [
  [1, 1],
  [2, 2],
  [3, 3],
  [4, 4]
];
var chartingOptions = {
  chart: {
    renderTo: 'container',
    zoomType: 'xy'
  },
  tooltip: {
    useHTML: true,
    shared:false,
    formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
  },
  series: [{
    type: 'scatter',
    name: 'serie',
    data: data
  }]
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
  chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

var数据=[
[1, 1],
[2, 2],
[3, 3],
[4, 4]
];
var图表选项={
图表：{
renderTo:'容器'，
zoomType:'xy'
},
工具提示：{
是的，
分享：错，
格式化程序：函数（）{return'sdsd'}
},
系列：[{
键入：“散布”，
名称：'意甲'，
数据：数据
}]
};
chartingOptions=$.extend（{}，jugalsLib.getBasicChartOptions（），chartingOptions）；
var图表=新的Highcharts.chart（图表选项）；
var$tooltip=$（chart.tooltip.label.element）；
$tooltip.mouseup（函数（e）{
chart.tracker.selectionMarker=chart.tracker.selectionMarker.destroy（）；
});

我解决了这个问题。我只需在div元素中添加一个

mousedown=“event.cancelBubble=true”

事件，它就可以工作了

你能给我们打个电话吗？在工具提示中滚动鼠标是什么意思？现在我明白了，但是JSFIDLE仍然很方便？嗨，Jugal，我尝试了你的解决方案，但是没有用，我尝试将代码放在JSFIDLE中，但是遇到了一些错误。我忘了告诉您工具提示是自定义html而不是预定义的工具提示。这意味着我在工具提示设置中创建了一个格式化程序函数。嗨，Jugal，请查看上面添加的代码，即示例代码。使用该代码，您可以复制我提到的问题。谢谢