ハイチャート - ホバーの代わりにツールチップonClickを表示

Question

私はhttps://stackoverflow.com/a/24206104/5653279で解決策を試しましたが、ハイチャートは2シリーズのデータ​​で構成されています。上記の溶液に続いて

が見られるように、私はは、plotoptionsを編集した場合、エラー

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: { 
      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);

を変更しかし、この修正プログラムの唯一の制限は、複数の系列がある場合（例えばラインAとB）との両方のシリーズのデータ​​は、上に落ちます同じX軸（同じ日付など）をクリックすると、そのシリーズのデータ​​のツールチップが表示されます（シリーズAのデータをクリックすると、Bのないデータだけがツールチップに表示されます） X軸）。