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

Question

我的页面中有一个散点图高图，它渲染得非常好。问题是当我在工具提示区域内滚动鼠标时，图表缩放功能正在执行。我需要禁用这个。但我不想完全禁用图表的缩放，因为要求表明它需要图表放大，以便在有重叠点时查看点信息。对此有何帮助？或者任何人都知道如何使用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();
});

Answer 1

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

代码

var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
  chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

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

演示

Handling mouse events in tooltip | Highchart & Highstock @ jsFiddle

//代码示例

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

Answer 2

我解决了这个问题。我只是在div元素中添加一个mousedown="event.cancelBubble=true"事件，它就可以了！