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();
}
}
(Sadece Tıklama etkinlik geri aramasında bir satır eklendi). Demoyu küçültebilir ve kodlanmış verileri ekleyebilir misiniz? –