javascript - 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

我的建议是将 animation: false 添加到您的 tooltip { } 属性中。

查看API:http://api.highcharts.com/highcharts/tooltip.animation

这将阻止每次移动位置时尝试执行的动画，并在调整点时产生良好的平滑过渡。

作为旁注:如果您没有数字格式，并且最终在某些点上有大量小数，而在其他点上没有，您仍然会注意到一些闪烁。这可以通过应用一些一致的数字格式来解决。