Javascript 试图在单击图表时生成弹出窗口。弹出窗口是一个关闭按钮

当用户点击一个条时，我试图在highcharts中产生一个弹出窗口。 到目前为止，我有一个代码，当用户点击一个条时，它会淡出所有其他条。我希望选中的条在条上方生成一个小弹出窗口，如下所示

选择关闭后，应高亮显示该条并将所有条恢复到正常状态

这是我的密码

javascript

$(function() {
$('#container4').highcharts({
    chart: {
        type: 'column',
        events: {
            click: function(e) {
                console.log(e);
            },
            selection: function(e) {
                console.log(e);
            }
        }
    },
    title: {
        text: ''
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    xAxis: {
        gridLineColor: '',
        labels: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        /*series: {
            allowPointSelect: true,
            states: {
                select: {
                    color: 'blue',
                }
            }
        },*/
        column: {
            stacking: 'normal',
        }
    },
    series: [{
        name: '',
        data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
        threshold: 0,
        color: '#E0E0E0 ',
        enableMouseTracking: false,
    }, {
        name: '',
        data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
        threshold: 0,
        color: 'green',
        negativeColor: 'red',
    }, ]
});
 });

$(document).on('click', '.highcharts-tracker rect', function() {
var elm = $(this);
if (!elm.attr('class')) {
    $('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5);

    elm.attr('class', 'active').css('opacity', 1);
} else {
    $('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
}
});

css

html

$（函数（）{
$（“#container4”）。高图({
图表：{
键入：“列”，
活动：{
点击：功能（e）{
控制台日志（e）；
},
选择：功能（e）{
控制台日志（e）；
}
}
},
标题：{
文本：“”
},
图例：{
已启用：false
},
出口：{
已启用：false
},
学分：{
已启用：false
},
xAxis：{
gridLineColor:“”，
标签：{
已启用：false
}
},
亚克斯：{
标题：{
文字：“水果”
},
可见：假
},
学分：{
已启用：false
},
打印选项：{
/*系列：{
allowPointSelect:true，
国家：{
选择：{
颜色：“蓝色”，
}
}
},*/
专栏：{
堆叠：“正常”，
}
},
系列：[{
名称：“”，
数据：[-40，-60，-70，-80，-90，-100，-100，-100，-100]，
阈值：0，
颜色：'#e0'，
enableMouseTracking:false，
}, {
名称：“”，
数据：[-60，-40，-30，-20，-10,0,10,20,30,40,50]，
阈值：0，
颜色：“绿色”，
负片颜色：“红色”，
}, ]
});
});
$（文档）.on（'click'，'highcharts tracker rect'，function（）{
var elm=$（本）；
如果（！elm.attr（'class'））{
$（'.highcharts tracker rect'）.removeAttr（'class'）.css（'opacity'，0.5）；
elm.attr（'class'，'active'）.css（'opacity'，1）；
$（“#指针”）.show（）。
抵消({
顶部：elm.offset（）.top-30，
左：elm.offset（）.左+10
})
}
});
$（“#指针”）。单击（函数（）{
$（'.highcharts tracker rect'）.removeAttr（'class'）.css（'opacity'，1）；
$（this.hide（））
})

.highcharts系列rect{
过渡：全部。3秒轻松；
}
#指针{
高度：30ph；
宽度：10px；
显示器：noone；
背景颜色：蓝色；
}

x

我是否可以用我给出的代码实现它？这几乎是我所需要的，但我希望用highcharts实现它

.highcharts-series rect {
 transition:all .3s ease;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>