highcharts在点击时显示工具提示

时间:2016-04-22 14:04:00

标签: javascript jquery highcharts

我正在尝试更改我的highcharts的行为,以便在点击并且不会悬停时显示有关数据的工具提示,这是我的图表对象代码,

this.chart = new Highcharts.Chart({

        chart : {
            renderTo : $container[0],
            type : chartType,
            events : {
                load: function() {
                    this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
                    console.log(this.myTooltip);
                }
            }
        },
        title: {
            enabled : false,
            useHTML: true,
            text: ''
        },
        legend : {
            enabled : false
        },
        xAxis: {
            categories: self.categories,
            labels : {
                rotation : 90,
                formatter: function(){
                    return '<a href="" class="axisLabel" data-name="'+ this.value +'">' + this.value + '</a>';
                },
                useHTML: true,
                padding: '10px',
                y: 30,
                x: -5,
                align:'left'
            }
        },
        yAxis: {
            allowDecimals: false,
            opposite:false
        },
        tooltip: {
            enabled: false,
            useHTML : true,
            backgroundColor: "rgba(255,255,255,1)",
            formatter : function() {
                if(self.graphView != "turn") {
                    var tooltip = self.showClientProjects(this.x, self.organisation_filter, this.y, self.graphView);
                    self.pointIndex = this.point.index;
                    return tooltip.innerHTML;
                } else {
                    console.log(this.x);
                    var tooltip = self.showClientProjects(this.x, null, null, self.graphView);
                    self.pointIndex = this.point.index;
                    return tooltip.innerHTML;
                }
            }
        },
        plotOptions: {
            column: {
                maxPointWidth: 5,
                pointPadding: 0.2,
                //borderWidth:1
            },
            series: {
                stickyTracking: false,
                events: {
                    click: function(evt){
                        this.chart.myTooltip.refresh(evt.point, evt)
                    },
                    mouseOut: function() {
                        this.chart.myTooltip.hide();
                    }
                }
            }
        },
        series: [{
            data : data,
            dataLabels : {
                crop : false
            }
        }]

    });

点击一个点会返回此错误,

  

highcharts.src.js:1319 Uncaught TypeError:无法读取属性&#39; call&#39; null这段代码来自highcharts库,

 // If the event handler return false, prevent the default handler from executing
 if (fn.call(el, eventArguments) === false) {
     eventArguments.preventDefault();
 }

然而,在我被击倒的快速小提琴上它完全正常,

http://jsfiddle.net/d1gL4cjx/1/

1 个答案:

答案 0 :(得分:0)

以下是更新(固定)小提琴的链接: http://jsfiddle.net/d1gL4cjx/2/