0

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

//代码示例

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

2 回答 2

1

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

代码

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

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

演示

在工具提示中处理鼠标事件 | 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();
});
于 2013-01-06T09:04:29.943 回答
0

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

于 2013-01-08T05:53:49.103 回答