如何在單擊按鈕時啟用或禁用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 barsShowen - 是一個具有必要狀態的全局變量 - 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

試試這個（只是一個演示如何實現它）：

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

        } else {
            return '';
        }
    }
}

Answer 4

基於Praveen N的答案，您還可以使用chart.update()啟用或禁用工具提示

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

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,
},

您可以在此處找到標記的其他選項。