Question

In this plunk，当用户点击图表工具提示时，他们会将其设置为“粘性”（即鼠标输出时工具提示不会隐藏）。再次单击工具提示时，它会消失。可以同时显示许多工具提示（直到用户点击它们为止）。

我（未成功）尝试使用Highcharts插件实现此目的。每个工具提示都有一个粘性标记;如果粘性标志为true，则不应在鼠标输出时隐藏工具提示。如果标志为false，则在鼠标输出时，工具提示应该消失（正常行为）。

请参阅下面的插件。有什么想法让它发挥作用吗？

(function (H) {

    // hide tooltip _only_ if 'sticky' attribute is not set
    H.wrap(H.Tooltip.prototype, 'hide', function (proceed) {
        if (typeof this.sticky === 'undefined' || this.sticky === false)
              proceed.apply(this);
    });


    // on tooltip click, set on the 'sticky' attribute
    H.Chart.prototype.callbacks.push(function (chart) {

            H.addEvent(chart.container, 'click', function (e) {

                // detect here that the tooltip was clicked 
                // and set the 'sticky' attribute
                this.sticky = true;
            });

    });


}(Highcharts));

Answer 1

我使用Highcharts插件使其工作in this plunk。如果单击工具提示，则会使其变为粘滞状态。再次单击它，它就会消失。即使chart.getSVG()也能正确显示工具提示。

唯一的问题是我必须使用我无法摆脱的全局变量/函数，因此任何输入都将受到赞赏。

使用Javascript：

var delTooltip = function (series,item) {
    var children = chart.container.firstChild.children;
    for (var i=0;i<children.length;i++) {
        var class2 = children[i].getAttribute('class');
        if (class2 === 'highcharts-tooltip' ) {

        //detect rect with series and item 
        var grandchildren = children[i].children;

        for (var j=0;j<grandchildren.length;j++){
            var series2 = null,
                item2 = null;
            series2 = grandchildren[j].getAttribute('data-series');
            if (typeof series2 !== 'undefined')
              item2 = grandchildren[j].getAttribute('data-item');

             if (item == item2 && series == series2) {
                 chart.container.firstChild.removeChild(children[i]);
                 var temp = chart.options.tooltip.hideDelay;
                 chart.options.tooltip.hideDelay = 0;
                 chart.tooltip.hide();
                 chart.options.tooltip.hideDelay = temp;
             }

           }
         }
     }
 };

 var hoveredPoint = null;
 var chart = null;

$(document).ready(function() {

   (function (H) {

    H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        hoveredPoint = { series: points.series.index, item: points.x };
    });

    // on tooltip click, set on the 'sticky' attribute
    H.Chart.prototype.callbacks.push(function (chart) {

            H.addEvent(chart.tooltip.label.element, 'click', function (e) {
                cloneTooltip(chart);
            });

    });

}(Highcharts));



chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    tooltip: {
        animation: false
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            cursor: 'pointer'
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    },{
        data: [19.9, 31.5, 46.4, 229.2, 124.0, 126.0, 125.6, 128.5, 116.4, 294.1, 125.6, 154.4]        
    }]
  });

});


  var cloneTooltip = function(chart){

    var clonedTooltip = chart.tooltip.label.element.cloneNode(true);
    var bb = chart.tooltip.label.element.getBBox();
    var w = bb.width;
    var h = bb.height;

    // create rect with onclick event (g element cannot accept click)
    var svgns = "http://www.w3.org/2000/svg";
    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'x', '0');
    rect.setAttributeNS(null, 'y', '0');
    rect.setAttributeNS(null, 'height', h);
    rect.setAttributeNS(null, 'width', w);
    rect.setAttributeNS(null, 'fill-opacity', '0');
    rect.setAttributeNS(null, 'data-series', hoveredPoint.series);
    rect.setAttributeNS(null, 'data-item', hoveredPoint.item);
    rect.setAttributeNS(null, 'onclick', 'delTooltip(' + hoveredPoint.series + ',' +  hoveredPoint.item + ')');
    clonedTooltip.appendChild(rect);

    chart.container.firstChild.appendChild(clonedTooltip);
};

Highcharts插件：点击时显示/隐藏工具提示

1 个答案: