Question

我正在尝试在移动应用程序中实现高级图表，一切正常但有一个问题，即在从potrait到横向更改方向时，为所选的任何点显示的工具提示不会隐藏在方向更改上。

请建议我如何在highcharts中以编程方式隐藏工具提示..

我尝试了以下代码：

$('#tankActualUsagechart').highcharts().tooltip.hide();

但这并没有隐藏我正在显示的标记......

如果有办法隐藏标记我也没关系..

请帮我解决这个问题

Answer 1

请查看http://jsfiddle.net/St84H/

您可以隐藏工具提示

tooltip: {
            enabled: false
        }

Answer 2

只要你有对Highcharts Chart对象的引用，就可以像这样隐藏工具提示：

// create chart
var myChart = new Highcharts.Chart({ /* snip */ });

// hide tooltip
myChart.tooltip.hide();

Answer 3

您必须提供格式化程序功能。诀窍是当你不想显示任何内容时返回false

这是一个小测试

HTML页面 -

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id='toggleTooltip'>Toggle tooltip</button>

JS代码 -

$(function () {
$('#container').highcharts({
    title: {
        text: 'tooltip enabled is set to false'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    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: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
    }]
});

$('#toggleTooltip').click(function () {
    var tooltipOptions = $('#container').highcharts().tooltip.options;
    if ($(this).hasClass('enabled')) {
        tooltipOptions.formatter = null;
        $(this).removeClass('enabled');
    } else {
        tooltipOptions.formatter = function () {
            return false;
        }
        $(this).addClass('enabled');
    }
 });
});

查看实时Here

Answer 4

我浏览了很多论坛，在任何地方我都找不到像tooltip.enable = true / false这样显示/隐藏工具提示的简单方法。我遇到的好方法是在图表初始化中通过Formatter设置工具提示设置。

var barsShowen - 是一个具有必要状态的全局变量 - true / false - 是否显示工具提示。

此示例将在2014年12月初之后的我的项目www.tanks-vs.com中有效。您可以看到。

tooltip: {

    shared: true,
    useHTML: true,

    formatter: function() {

        if (barsShowen) {

            var s = '<span><b>' + this.x + '</b></span><table>';

            $.each(this.points, function () {
                s += '<tr><td align = "left" style = "color:' + this.series.color + ';">' + this.series.name + ': ' +'</td>' +
                    '<td><b>'+  this.y +'</b></td></tr>' ;
                });


            return s+'</table>';
        } else {
            return false;
        }
}

Answer 5

您需要设置标记/点默认状态。

这样的事情：

chart.series[0].data[index_of_tooltip_point].setState("");

Answer 6

尝试使用以下代码：

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },

        plotOptions: {
            series: {
                events: {
                   click: function(e) {
                        enabledTooltip();
                    }
                }
            }
        },

        tooltip: {
            crosshairs: [{
                dashStyle: "Solid"
            }, false],
             enabled: false
        },

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



    var enabledTooltip = function(){
alert(567);
        var options = chart.options;
        options.tooltip.enabled = true;
   chart = new Highcharts.Chart(options);
};

});

希望这适合你

Answer 7

这是jenky但是符合我的目的

$(document).ready(function(){
  $('.highcharts-container text:last').hide()
})

Answer 8

如果您在运行时需要，请尝试此操作。

chart.tooltip.hide（）;

它对我有用http://forum.highcharts.com/highcharts-usage/tooltip-how-to-show-hide-tooltips-onblur-t5926/

Answer 9

我在chart.pointer.reset()期间使用legendItemClick删除标记和工具提示，它就像魅力一样

jsfiddle sample

Answer 10

您可以使用更新功能

    var mychart = $('#container').highcharts();

有关禁用工具提示：

    mychart.update({tooltip: {enabled: false}});

有关启用工具提示：

    mychart.update({tooltip: {enabled: true}});

选中此jsfiddle：

Answer 11

尝试使用enabled选项false，例如：

tooltip: {
    enabled: false,        
  }

试试这个FIDDLE

Answer 12

您可以使用chart.myTooltip.destroy()方法手动删除工具提示。例如：

var myChart = new Highcharts.Chart({ /* ... */ });
myChart.myTooltip.destroy();

这将删除当前实例，并在下次将鼠标悬停在一个点上时（或用户显示工具提示所采取的任何操作）重新出现。

如何以编程方式隐藏highcharts中的工具提示？

12 个答案: