ハイチャートのマウスクリックイベント中の共有ツールチップエラー

Question

HighChartsでマウスをクリックしている間にツールヒントに複数の項目を表示したいとします。マウスをクリックしている間だけ、ヒントを表示したいので、ツールヒントのプロパティでenabled:falseとshared: trueを使用しています。ツールチップには5つの項目が表示されます。最初の3つの項目は「列」のタイプであり、残りの2つの項目は「ライン」タイプです。

ここでの問題は、最初のクリック時に列タイプのアイテムがsearchPoint(event,true)で未定義になっていますが、広告申込情報は正常に機能しています。最初のクリック後、すべて正常に動作しています。

誰でも手伝ってもらえますか？

私は以下で使用したコードを提供しました。

function GenerateChartPulledUnit(title, ctrl, CountText, NonQty, PulledQty, ScannedQty, MaxDefect, ActualDPU) 
{ 
if (CountText.length > 0) { 
    $("#divChartPulled" + ctrl).show(); 
    $("#divNoDataPulled" + ctrl).hide(); 
    $("#divNoDataHeaderPulled" + ctrl).hide(); 
    $('#divPulled' + ctrl + '').highcharts({ 
     chart: { 
      spacingLeft: 64, 
      events: { 
       load: function() { 
        //debugger; 
        this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip); 
       }, 
      } 
     }, 

     title: { 
      text: title 
     }, 
     xAxis: { 
      categories: CountText, 
     }, 
     tooltip: { 

      enabled:false, 
      shared: true, 
      formatter: function() { 
       debugger; 
       var tt = this.y + this.x; 
      } 

     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
      }, 
      spline: { 

      }, 
      series: { 
       stickyTracking: false, 
       events: { 
        click: function (evt) { 
         debugger; 
         var points = []; 
         var sample=[]; 

         var points = this.chart.series.map(function (d,index) { 

          return d.chart.series[index].searchPoint(evt, true); 

         }); 

         if (Unitteamcount == 0) { 
          SelUnitTeam = evt.point.category; 
          this.chart.myTooltip.refresh(points, evt); 
          Unitteamcount = 1; 
         } 
         else if (SelUnitTeam != evt.point.category) { 
          this.chart.myTooltip.refresh(points, evt); 
          SelUnitTeam = evt.point.category; 
         } 
         else { 
          this.chart.myTooltip.hide(); 
          Unitteamcount = 0; 
         } 

        } 



       } 

      } 
     }, 

     yAxis: [{ // Secondary yAxis   
      labels: { 
       format: '{value}', 
      }, 
      title: null, 
     }, { // Primary yAxis 
      labels: { 
       format: '{value}%', 
      }, 
      opposite: true, 
      title: null, 
     }, ], 

     legend: { 
      align: 'center', 
      verticalAlign: 'top', 
      y: 30, 
     }, 
     series: [{ 
      name: 'Non-Negotiable Qty', 
      type: 'column', 

      color: "#eccf18", 
      data: NonQty 
     }, { 
      name: 'Pulled Qty', 
      type: 'column', 
      color: "#ff0000", 
      data: PulledQty 
     }, { 
      name: 'Scanned Qty', 
      type: 'column', 
      color: "#ffa238", 
      data: ScannedQty 
     } 
     , { 
      name: 'Max.Tolerable Defect', 
      type: 'line', 
      yAxis: 1, 
      color: "#0d9149", 
      data: MaxDefect, 
      marker: { 
       enabled: false, 
      }, 
      tooltip: { 
       valueSuffix: ' %' 
      } 

     }, { 
      name: 'Actual DPU %', 
      type: 'line', 
      yAxis: 1, 
      color: "#00b0f0", 
      marker: { 
       fillColor: 'red', 
       symbol: 'circle' 
      }, 
      data: ActualDPU, 
      tooltip: { 
       valueSuffix: ' %' 
      } 
     } 
     ] 
    }); 
} 
else { 
    $("#divChartPulled" + ctrl).hide(); 
    $("#divNoDataPulled" + ctrl).show(); 
    $("#divNoDataHeaderPulled" + ctrl).show(); 
} 
}   

Answer 1

私の解決策は、むしろハックです。

がtrue
にごセリエオプションkdNowを設定し、あなたは存在しない変数を参照してくださいあなたの例では

var points = this.chart.series.map(function (d,index) { 
    d.chart.series[index].options.kdNow = true; 
    return d.chart.series[index].searchPoint(evt, true); 

}); 

Here is the associated source code for kdNow