高图中线图的自定义工具提示

Question

我有用折线图定制的图表，我通过自定义标记显示图像 - ＆gt;高图中的符号。

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

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

下面是我的代码，

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()
    });
}

工作JSFiddle在这里：http://jsfiddle.net/sarav4gs/vt67c4tz/1/

非常感谢帮助!!