0

ページに散布図のハイチャートがあり、非常によくレンダリングされます。問題は、ツールチップ領域内でマウスをスクロールすると、チャートのズーム機能が実行されていることです。これを無効にする必要があります。ただし、チャートをズームインして、ドットが重なっている場合にドット情報を調べる必要があると要件に記載されているため、チャートのズームを完全に無効にしたくありません。これについて何か助けがありますか？または、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();
});
4

2 に答える 2

1

ツールチップ要素でmouseupイベントを処理し、このハンドラーでズーム選択要素を破棄できます。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 に答える