Highcharts - Показать всплывающую подсказку onClick вместо зависания

Question

Я пробовал решение по адресу https://stackoverflow.com/a/24206104/5653279, но безрезультатно, так как мои Highcharts состоят из двух серий данных.

После вышеуказанного раствора возвращает мне ошибку

Uncaught TypeError: Cannot read property 'category' of undefined

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'spline', 
     zoomType: 'xy', 
     events: { 
       load: function(){ 
        this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);      
       } 
      } 
    }, 
    tooltip: { 
      enabled: false, 
     headerFormat: '<b>{point.x: %A, %b %e at %I:%M %p}</b><br>', 
      shared: true, 
     borderRadius: 10, 
     crosshairs: [true, false] //x,y 
    }, 
    plotOptions: { 
      series: { 
       stickyTracking: false, 
       events: { 
        click: function(evt) { 
         this.chart.myTooltip.refresh(evt.point, evt); 
        }, 
        mouseOut: function() { 
         this.chart.myTooltip.hide(); 
        }      
       } 
      } 
     }, 
    title: { 
     text: 'Glucose/Carbohydrate' 
    }, 
    subtitle: { 
     text: 'Ratio between Glucose and Glucose' 
    }, 
    xAxis: { 
     type: 'datetime', 
     dateTimeLabelFormats: { 
      month: '%e/%b', 
     }, 
     title: { 
      text: 'Date' 
     } 
    }, 
    yAxis: [{ // Glucose yAxis 
     labels: { 
      format: '{value}mmol/L', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     title: { 
      text: 'Glucose', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     } 
    }, { // Carbohydrate yAxis 
     title: { 
      text: 'Carbohydrate', 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     labels: { 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     opposite: true 
    }], 
    series: [{ 
     name: 'Glucose', 
     data: glucose, 
     marker: { 
      enabled: true 
     }, 
     tooltip: { 
      valueSuffix: ' mmol/L' 
     } 
    },{ 
     name: 'Carbohydrate', 
     data: carbohydrate, 
     dashStyle: 'shortdot', 
     yAxis: 1, 
     marker: { 
      enabled: true 
     } 
    } 
    ]} 
    ); 
}); 

Однако ошибка будет «решена», если я редактировать plotOptions как видно.

plotOptions: { 
      series: [{ 
       stickyTracking: false, 
       events: { 
        click: function(evt) { 
         this.chart.myTooltip.refresh(evt.point, evt); 
        }, 
        mouseOut: function() { 
         this.chart.myTooltip.hide(); 
        }      
       } 
      }, 
      { 
       stickyTracking: false, 
       events: { 
        click: function(evt) { 
         this.chart.myTooltip.refresh(evt.point, evt); 
        }, 
        mouseOut: function() { 
         this.chart.myTooltip.hide(); 
        }      
       } 
      }] 
     }, 

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

Answer 1

Решил проблему!

Просто изменил

this.chart.myTooltip.refresh(evt.point, evt);

в

this.chart.myTooltip.refresh([evt.point], evt);

Но единственное ограничение для исправления, если есть кратные ряды (например, линия А и В) и данные обеих серий падает на то же X-Axis (например, в ту же дату), щелкнув по нему, будет отображаться только подсказка данных этой конкретной серии (если я нажимаю на данные серии A, всплывающая подсказка показывает только данные A без B, хотя они используют один и тот же Ось X).