Jquery highcharts中直线图的自定义工具提示

我有一张用折线图定制的图表，我正在通过自定义高图表中的标记->符号来显示图像

现在我想为每个符号（图标）创建

工具提示

我面临的问题是，我无法在每个符号上获得悬停事件

下面是我的代码

function LoadProjectGraph()
{
    projectGraph = LoadProjects(dashboardPageNo, dashboardRowCount);
    projects = projectGraph.projects;
    $('#ao-projectssummry-chart').highcharts({
        chart: {
            type: "columnrange",
            inverted: true,
            marginLeft: 300,
            animation: false,
            events: {
                load: function () {
                    longerGridLines(this);
                    var chart = this;
                    var currentMax = chart.xAxis[0].getExtremes().max;


                    $('.customLabel').click(function () {
                        Highcharts.each($('.customLabel'), function (p, i) {
                            $(p).removeClass('customLabelSelected');
                        })
                        $(this).addClass('customLabelSelected');
                        var text = this.offsetParent.innerHTML,
                            index = parseInt(text.substring(0, text.indexOf(' '))) - 1;
                        $('.cross').remove();
                        var xAxis = chart.xAxis[0],
                            distance = xAxis.toPixels(1) - xAxis.toPixels(0),
                            plotTop = xAxis.toPixels(index - 0.5),
                            width = chart.chartWidth;
                        chart.renderer.rect(0, plotTop, width, distance)
                            .attr({
                                fill: 'rgba(200,200,200,0.5)',
                                zIndex: 1
                            }).addClass('cross')
                            .add();
                    });
                    chart.xAxis[0].setExtremes(0, 4);
                },
                redraw: function () {
                    longerGridLines(this)
                }
            }
        },
        title: {
            text: null
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip : {
            formatter: function () {
                //return this.va
            },
            enabled: true
        },        
        yAxis: {
            title: null,           
            labels: {
                formatter: function () {
                    return 'Week ' + this.value
                }
            },
            gridLineWidth: 1,
            gridZIndex: 0,
            type: 'int',
            tickInterval: 4,
            min: 0,
            max: 52,
        },
        xAxis: {
            categories: //projectGraph.categories,
                [
                'Model', 'Optimize', 'Pilot', 'Deploy', 'Monitor', 'Pilot', 'Deploy', 'Monitor'],
            min: 0,
            max: 4,
            title: null,
            gridLineWidth: 1,
            gridZIndex: 0,

            labels: {
                width: 200,
                marginLeft: 0,
                useHTML: true,

                formatter: function () {
                    if (projects[this.axis.categories.indexOf(this.value)] && projects[this.axis.categories.indexOf(this.value)].projectstatus == "repeat") {
                        var projecttype = "<i class='fa fa-refresh fa-lg'></i>";
                    } else {
                        var projecttype = '1';
                    }
                    if (projects[this.axis.categories.indexOf(this.value)]) {
                        return '<a href="' + urlOpenProject + '/' + projects[this.axis.categories.indexOf(this.value)].projectId + '"> <div class="ProjectListsrow"><span class="ao-projectname" title="' + projects[this.axis.categories.indexOf(this.value)].projectname + '">' + (projects[this.axis.categories.indexOf(this.value)] ? projects[this.axis.categories.indexOf(this.value)].projectname : '') + '</span><span class = "ao-projectstatus-label ao-' + projects[this.axis.categories.indexOf(this.value)].projectState + '">' + projects[this.axis.categories.indexOf(this.value)].projectState + '</span> <span class="ao-projecttype-icon">' + projecttype + ' </span>   </div></a>';
                    }
                    else
                        return '<a href="#"> <div class="ProjectListsrow"><span class="ao-projectname"></span><span class = "ao-projectstatus-label"></span> <span class="ao-projecttype-icon"></span>   </div></a>';
                }
            },
            crosshair: {
                snap: true
            }
        },
        plotOptions: {
            series: {
                pointWidth: 4,
                borderRadius: 0,
                point: {
                    events: {
                        mouseOver: function () {
                            $('.cross').remove();
                            Highcharts.each($('.customLabel'), function (p, i) {
                                $(p).removeClass('customLabelSelected');
                            })
                            $($('.customLabel')[this.x]).addClass('customLabelSelected')
                            var xAxis = this.series.xAxis,
                                distance = xAxis.toPixels(1) - xAxis.toPixels(0),
                                plotTop = xAxis.toPixels(this.x - 0.5),
                                width = this.series.chart.chartWidth;
                            this.series.chart.renderer.rect(0, plotTop, width, distance)
                                .attr({
                                    fill: 'rgba(200,200,200,0.5)',
                                    zIndex: 1
                                }).addClass('cross')
                                .add();
                        },
                        mouseOut: function () {
                            Highcharts.each($('.customLabel'), function (p, i) {
                                $(p).removeClass('customLabelSelected');
                            })
                            $('.cross').remove();
                        }
                    }
                },
                marker: {
                    enbled: false
                },
                groupPadding: 0.5,

            },
            line: {
                lineWidth: -1,
                marker: {
                    enabled: true,
                    radius: 0,
                    symbol: 'circle'
                }

            }
        },
        series: aoDashboardData()
    });
}

函数LoadProjectGraph（）
{
projectGraph=LoadProjects（仪表板页码、仪表板行数）；
projects=projectGraph.projects；
$（“#ao项目图表”）。高图({
图表：{
类型：“columnrange”，
倒：是的，
边缘左：300，
动画：错，
活动：{
加载：函数（）{
Longerridlines（本）；
var图表=此；
var currentMax=chart.xAxis[0].getExtremes（）.max；
$（'.customLabel'）。单击（函数（）{
Highcharts.each（$（'.customLabel'）、函数（p，i）{
$（p）.removeClass（'customLabelSelected'）；
})
$（this.addClass（'customLabelSelected'）；
var text=this.offsetParent.innerHTML，
index=parseInt（text.substring（0，text.indexOf（“”））-1；
$（'.cross'）.remove（）；
var xAxis=chart.xAxis[0]，
距离=xAxis.toPixels（1）-xAxis.toPixels（0），
plotTop=xAxis.toPixels（索引-0.5），
宽度=图表。图表宽度；
chart.renderer.rect（0，plotTop，宽度，距离）
艾特先生({
填充：“rgba（200200,0.5）”，
zIndex:1
}).addClass（'cross'）
.add（）；
});
chart.xAxis[0].setextrems（0,4）；
},
重画：函数（）{
Longerridlines（本）
}
}
},
标题：{
文本：空
},
学分：{
已启用：false
},
图例：{
已启用：false
},
工具提示：{
格式化程序：函数（）{
//把这个还给我
},
已启用：true
},        
亚克斯：{
标题：空，
标签：{
格式化程序：函数（）{
返回'Week'+此.value
}
},
网格线宽度：1，
gridZIndex:0，
键入：“int”，
时间间隔：4，
分:0,，
最高：52，
},
xAxis：{
categories://projectGraph.categories，
[
“模型”、“优化”、“试点”、“部署”、“监控”、“试点”、“部署”、“监控”]，
分:0,，
最高：4，
标题：空，
网格线宽度：1，
gridZIndex:0，
标签：{
宽度：200，
marginLeft:0，
是的，
格式化程序：函数（）{
if（projects[this.axis.categories.indexOf（this.value）]&&projects[this.axis.categories.indexOf（this.value）]。projectstatus==“重复”）{
var projecttype=“”；
}否则{
var projecttype='1'；
}
if（项目[this.axis.categories.indexOf（this.value）]）{
返回“”；
}
其他的
返回“”；
}
},
十字线：{
快照：是的
}
},
打印选项：{
系列：{
点宽度：4，
边界半径：0，
要点：{
活动：{
鼠标悬停：函数（）{
$（'.cross'）.remove（）；
Highcharts.each（$（'.customLabel'）、函数（p，i）{
$（p）.removeClass（'customLabelSelected'）；
})
$（$（'.customLabel'）[this.x]）.addClass（'customLabelSelected'）
var xAxis=this.series.xAxis，
距离=xAxis.toPixels（1）-xAxis.toPixels（0），
plotTop=xAxis.toPixels（该.x-0.5），
宽度=this.series.chart.chartWidth；
this.series.chart.renderer.rect（0，plotTop，width，distance）
艾特先生({
填充：“rgba（200200,0.5）”，
zIndex:1
}).addClass（'cross'）
.add（）；
},
mouseOut:函数（）{
Highcharts.each（$（'.customLabel'）、函数（p，i）{
$（p）.removeClass（'customLabelSelected'）；
})
$（'.cross'）.remove（）；
}
}
},
标记：{
恩布莱德：错
},
分组填充：0.5，
},
行：{
线宽：-1，
标记：{
启用：对，
半径：0，
符号：“圆圈”
}
}
},
系列：aoDashboardData（）
});
}

工作JSFIDLE在这里：

非常感谢您的帮助
 你的链接不起作用，你能发一个正确的吗？对不起。我已经改变了f