Question

当我们悬停在In example时，我们今月看不到tooltip，因为数据为空。我可以设置设置以在数据为空时查看工具提示吗？

Answer 1

据我所知，由于highcharts忽略显示的空值，因此没有通用选项。

另一方面，我们可以将null点替换为“假”点，它们具有2个最近点之间的平均值（这将导致图表流保持不变），并且具有自定义属性isNull，可以在以后用作标志。

执行此操作后，我们可以使用formatter函数作为工具提示，并按照我们想要的方式操作工具提示，例如，在点isNull时仅显示系列名称。

$(function () {
    $('#container').highcharts({
        title: {
            text: 'The line is connected from April to Juni, despite the null value in May'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                connectNulls: true
            }
        },
        tooltip: {
            formatter: function(){
                if(this.point.isNull == undefined)
                    return this.series.name+"<br>"+"<b>value:</b>"+this.y;
                return this.series.name;
            }
        },
        series: [{
            data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
        }]

    }, function(chart){
        var series = chart.series[0];
        var data = series.data;
        $.each(data,function(i){
            var point = data[i];
            var prevPoint = data[i-1] != undefined ? data[i-1].y : 0;
            var nextPoint = data[i+1] != undefined ? data[i+1].y : 0;
            if(point.y == null){
                series.addPoint({x:point.x,y:(prevPoint+nextPoint)/2, isNull:true});
            }
        });
    });
});

http://jsfiddle.net/zb5ksxtc/1/

我希望这就是你的意思。

<强>更新我们也可以做一些不那么糟糕的事情...（我想有点黑客可以在这个不寻常的情况下正常工作）

我在这里做的是创建一个“假的”散布系列，其中的点位于真实系列中的空值（使用相同的平均逻辑）。该系列有隐藏的标记，并具有唯一的名称。

之后，我使用shared工具提示和formatter来显示正确的工具提示。我使用name属性来确定关注的系列：

$(function () {
    $('#container').highcharts({
        title: {
            text: 'The line is connected from April to Juni, despite the null value in May'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                connectNulls: true,

            },
        },
        tooltip: {
             shared:true,

            formatter: function(){
                var points = this.points;
                var seriesName = points[0].series.name;
                if(seriesName == 'fake')
                    return "Null tooltip";
                return seriesName+"<br>value: <b>"+this.y+"</b>";
            }
        },
        series: [{
            type:'areaspline',
            data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
        },
                 {
                     type:'spline',
                     lineWidth:0,
                     name:'fake',
                     showInLegend:false,
                     marker:{
                         symbol:'circle',
                         radius:0,
                     }
                 }
           ]

    }, function(chart){
        var series = chart.series[0];
        var fake_series = chart.series[1];
        $.each(series.data, function(i){
            var point = this;
            var nextPoint = series.data[i+1] != undefined ? series.data[i+1].y : 0;
            var prevPoint = series.data[i-1] != undefined ? series.data[i-1].y : 0;
            if(series.data[i].y == null)
                fake_series.addPoint([series.data[i].x, (nextPoint+prevPoint)/2]);
        });
    });
});

和小提琴：http://jsfiddle.net/zb5ksxtc/8/

Highcharts：当point = null时，如何显示工具提示？

1 个答案: