1
У меня есть два набора данных в линейной диаграмме с использованием Highcharts. Мне нужно настроить форматировщик всплывающей подсказки, однако всякий раз, когда я перетаскиваю точку, всплывающая подсказка невероятно глючит (похожая на мерцание и отключение кучки раз).Highcharts draggable glitchy tooltip
Вот JSFiddle: http://jsfiddle.net/utnz2b9e/39/
Поведение я говорю о том, можно увидеть при перетаскивании синей точки на правой стороне графика. При перетаскивании перекрестье мерцает назад и вперед между этой точкой и значением x последней ненулевой точки данных другой серии. Кроме того, подсказка мерцает и затрудняет просмотр.
Javascript -
var planChart;
var startDates = ["Fri, 11/6/15", "Sat, 11/7/15", "Sun, 11/8/15", "Mon, 11/9/15", "Tue, 11/10/15", "Wed, 11/11/15", "Thu, 11/12/15", "Fri, 11/13/15", "Sat, 11/14/15", "Sun, 11/15/15", "Mon, 11/16/15", "Tue, 11/17/15", "Wed, 11/18/15", "Thu, 11/19/15", "Fri, 11/20/15"];
$(function() {
planChart = {
chart: {
renderTo: 'container',
animation: false
},
title: {
text: ''
},
xAxis: {
categories: startDates,
crosshair: true,
},
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#20709e'
},
formatter:function() {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
},
title: {
text: 'Data',
margin: 30,
style: {
color: '#20709e'
}
}
}, { // Secondary yAxis
gridLineWidth: 0,
labels: {
style: {
color: '#B9B9B9'
},
formatter:function() {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
},
title: {
text: '',
},
opposite: true
}],
plotOptions: {
series: {
connectNulls: true,
stickyTracking: false,
marker: {
enabled: true,
symbol: 'circle'
}
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
shared: true,
formatter: function() {
var tooltipString = this.x + '<br/>';
this.points.forEach(function(point) {
if (point.series.index == 0) {
var y = Math.round(point.y);
var roundingFactor = Math.min(100, Math.pow(10, y.toString().length - 2));
tooltipString += '<span style="color:' + point.color + '">\u25CF</span> ' + '<b> ' + Math.ceil(point.y/roundingFactor) * roundingFactor + '</b><br/>';
} else if (point.series.index == 1) {
var y = Math.round(point.y);
var roundingFactor = Math.min(100, Math.pow(10, y.toString().length - 2));
tooltipString += '<span style="color:' + point.color + '">\u25CF</span> ' + '<b> ' + Math.ceil(point.y/roundingFactor) * roundingFactor + '</b><br/>';
}
})
return tooltipString;
}
},
credits: {
enabled: false
},
series: [{
name: '1',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, null, 18.3, 13.9, 9.6, 7.0, 7.0, 7.0],
draggableY: true,
yAxis: 0,
dragMinY: 0,
style: {
color: '#20709e'
}
}, {
name: '2',
data: [null, null, 20, 30, 40, 40, 30, 34, 43, null, null, null, null, null, null],
draggableY: true,
yAxis: 0,
dragMinY: 0,
style: {
color: '#20709e'
}
}]
}
$('.actualPlansPlot').highcharts(planChart);
});
}