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);
});
}