javascript - 单击按钮时如何启用或禁用 Highcharts 工具提示？

Question

这是我尝试过的：

$("#toollip").click(function(){
    if(chart.container.tooltip.enabled ){
        chart.container.tooltip.enabled = false;
    }else{
        chart.container.tooltip.enabled  = true;
    }
});

Answer 1

我浏览了很多论坛，但没有找到非常简单的方法来显示/隐藏工具提示，如 tooltip.enable = true/false。我想到的一个好方法是在图表的初始化中通过 Formatter 设置工具提示设置。

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

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 2

您可以chart.update()结合工具提示样式属性。

隐藏工具提示

chart.update({
    tooltip: {
        style: {
            display: "none",
        }
    }
});

显示工具提示

  chart.update({
              tooltip: {
                  style: {
                      display: "block",
                  }
              }
   });

检查一下

https://jsfiddle.net/parveennp/1kbo8100/5/

Answer 3

根据 Praveen N 的回答，您还可以使用启用或禁用工具提示chart.update()

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

Answer 4

试试这个（只是一个演示你如何实现它）：

tooltip: {
    enabled: true,
    formatter: function() {
        if (status) {
            return '<b>' + this.x + '</b><br/>' + this.point.series.name + ': ' + this.y;

        } else {
            return '';
        }
    }
}

Answer 5

使用基本 CSS 和 HighChart.update 方法阻止它显示：

chart.update({
    tooltip: {
        style: {
            display: "none",
        }
    }
});

这样，在您应用 CSS 使其显示之前，您的图表的工具提示将不会出现。另外，我认为您的示例代码应该可以工作，但您可能有错字：

$("#toollip").click(function(){

也许应该是

$("#tooltip").click(function(){

希望能帮助到你 ！

Answer 6

如果你写“系列”点工具提示，你将需要这个选项：

enableMouseTracking: false,

在代码中：

$(function () { 
    var Chart = Highcharts.chart('Chart', {
        chart: {
            type: 'line',
        },
        title: {
            text: Chart,
        },
        xAxis: {
            categories: ['1', '2', '3'],
        },
        yAxis: {

        },
        series: [{
            name: 'Line',
            data: [10, 20, 30,],
            enableMouseTracking: false,
        },],
    });
});

这是官方的 JSFiddle 示例。

您还可以使用以下选项从线上删除所有标记点：

marker: {
    enabled: false,
},

您可以在此处找到其他标记选项。