2016-03-31 16 views
0

Yüksek Fare'de bir fare tıklatması sırasında ToolTip'te birden fazla öğe göstermek istiyorum. Araç İpucu'nu yalnızca fare tıklatması sırasında değil vurgulu olarak göstermek istiyorum, bu yüzden ToolTip özelliklerinde enabled:false ve shared: true kullanıyorum. Araç ipucunda görüntülenecek 5 öğe vardır. İlk 3 öğe "sütun" tipi ve kalan 2 öğe "çizgi" tipi.Paylaşılan Araç İpucu hatası sırasında yüksek hızlarda fare tıklaması olayı

Buradaki sorun, ilk tıklama sırasında sütun türüne sahip olan öğelerin searchPoint(event,true) tarafından tanımsız olmasına rağmen satır öğeleri düzgün çalışıyor. İlk tıklamanın ardından her şey yolunda gidiyor.

Bana yardım eden var mı?

Aşağıda kullandığım kodu sağladım.

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(); 
} 
}   
+0

(Sadece Tıklama etkinlik geri aramasında bir satır eklendi). Demoyu küçültebilir ve kodlanmış verileri ekleyebilir misiniz? –

cevap

0

Çözümüm oldukça kesmek.

true
için seri seçeneklerini kdNow ayarlayın sen yoksun değişkenleri ifade sizin örnekte

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

İlgili konular