Удалить подсказку в синхронизированных диаграммах, когда пользователь покидает область диаграммы

Question

Я использую Синхронизированную диаграмму Highcharts для демонстрации статистики. Для справки: http://www.highcharts.com/demo/synchronized-charts.

Здесь, когда график набирается впервые, точки данных не выбраны. Поскольку курсор входит в область диаграммы, всплывают подсказки, перекрестия и точки данных. Он работает так, как ожидалось.

Модификация, в которой я нуждаюсь, когда пользователь выходит из графика, диаграмма должна выглядеть так, как на этапе загрузки.

Т.е. если курсор не находится ни на одной из диаграмм, то не должны оставаться выбраны точки данных. Другими словами, всплывающая подсказка, перекрестие и выделенная тень на точке данных должны быть удалены.

Заранее благодарим за любую помощь или предложение.

Answer 1

использование MouseLeave обнаружить, когда мышь находится вне контейнера:

$('#container').bind('mouseleave', function(e) { 

использования метода скрыть скрыть подсказку и скрыть Crosshair способ скрыть перекрестие:

chart.tooltip.hide(point); 
    chart.xAxis[0].hideCrosshair(); 

Проверьте пример (jsfiddle)

$(function() { 


    $('#container').bind('mouseleave', function(e) { 
    var chart, 
     point, 
     i, 
     event; 

    for (i = 0; i < Highcharts.charts.length; i = i + 1) { 
     chart = Highcharts.charts[i]; 
     event = chart.pointer.normalize(e.originalEvent); 
     point = chart.series[0].searchPoint(event, true); 

     point.onMouseOut(); 
     chart.tooltip.hide(point); 
     chart.xAxis[0].hideCrosshair(); 
    } 
    }); 
    $('#container').bind('mousemove touchmove touchstart', function(e) { 
    var chart, 
     point, 
     i, 
     event; 

    for (i = 0; i < Highcharts.charts.length; i = i + 1) { 
     chart = Highcharts.charts[i]; 
     event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart 
     point = chart.series[0].searchPoint(event, true); // Get the hovered point 

     if (point) { 
     point.onMouseOver(); // Show the hover marker 
     chart.tooltip.refresh(point); // Show the tooltip 
     chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair 
     } 
    } 
    }); 
    /** 
    * Override the reset function, we don't need to hide the tooltips and crosshairs. 
    */ 
    Highcharts.Pointer.prototype.reset = function() { 
    return undefined; 
    }; 

    /** 
    * Synchronize zooming through the setExtremes event handler. 
    */ 
    function syncExtremes(e) { 
    var thisChart = this.chart; 

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop 
     Highcharts.each(Highcharts.charts, function(chart) { 
     if (chart !== thisChart) { 
      if (chart.xAxis[0].setExtremes) { // It is null while updating 
      chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { 
       trigger: 'syncExtremes' 
      }); 
      } 
     } 
     }); 
    } 
    } 

    // Get the data. The contents of the data file can be viewed at 
    // https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json 
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) { 
    $.each(activity.datasets, function(i, dataset) { 

     // Add X values 
     dataset.data = Highcharts.map(dataset.data, function(val, j) { 
     return [activity.xData[j], val]; 
     }); 

     $('<div class="chart">') 
     .appendTo('#container') 
     .highcharts({ 
      chart: { 
      marginLeft: 40, // Keep all charts left aligned 
      spacingTop: 20, 
      spacingBottom: 20 
      }, 
      title: { 
      text: dataset.name, 
      align: 'left', 
      margin: 0, 
      x: 30 
      }, 
      credits: { 
      enabled: false 
      }, 
      legend: { 
      enabled: false 
      }, 
      xAxis: { 
      crosshair: true, 
      events: { 
       setExtremes: syncExtremes 
      }, 
      labels: { 
       format: '{value} km' 
      } 
      }, 
      yAxis: { 
      title: { 
       text: null 
      } 
      }, 
      tooltip: { 
      positioner: function() { 
       return { 
       x: this.chart.chartWidth - this.label.width, // right aligned 
       y: -1 // align to title 
       }; 
      }, 
      borderWidth: 0, 
      backgroundColor: 'none', 
      pointFormat: '{point.y}', 
      headerFormat: '', 
      shadow: false, 
      style: { 
       fontSize: '18px' 
      }, 
      valueDecimals: dataset.valueDecimals 
      }, 
      series: [{ 
      data: dataset.data, 
      name: dataset.name, 
      type: dataset.type, 
      color: Highcharts.getOptions().colors[i], 
      fillOpacity: 0.3, 
      tooltip: { 
       valueSuffix: ' ' + dataset.unit 
      } 
      }] 
     }); 
    }); 
    }); 
});