Highcharts可拖動的故障工具提示

Question

我在使用Highcharts的折線圖中有兩組數據。 我需要能夠自定義工具提示格式化程序，但是，每當我拖動一個點時，工具提示就會出現令人難以置信的小故障（類似於多次閃爍）。

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

Answer 1

我的建議是在您的tooltip { }屬性中添加animation: false 。

參見API： http ： //api.highcharts.com/highcharts/tooltip.animation

這將防止每次移動位置時嘗試執行的動畫，並在調整點時產生良好的平滑過渡。

附帶說明：如果您沒有數字格式設置，並且在某些點上以大量小數結尾，而在其他點上沒有小數，您仍然會注意到一些閃爍。 這可以通過應用一些一致的數字格式來解決。