【问题标题】：How to hide Axes Crosshairs by onclick event in Highcharts如何通过 Highcharts 中的 onclick 事件隐藏 Axes Crosshairs
【发布时间】：2016-06-21 06:16:39
【问题描述】：

我想用 onclick 事件做 Axes Crosshairs。最初启用十字准线。单击切换工具提示按钮时，我们必须隐藏十字准线。

这是我的代码

这里是 onclick 事件发生的按钮

<a href="#" id="toggle_tooltip"><i class="fa fa-crosshairs center-in-block" aria-hidden="true"></i></a>

轴上的 Highcharts 初始化

[注意，这里我们没有使用工具提示]

$(function() {
    $(document).ready(function() {
xAxis: {
                type: 'datetime',
                crosshair: {
                 color: '#335A81',
                    label: {
                        enabled: true,
                        padding: 8,
                    }
                },
              },
yAxis: {

                opposite: true,
                crosshair: {
                    label: {
                        enabled: true,
                        format: '{value:.2f}'
                    }
                },
)};
)};

这里是onclick事件函数

$('#toggle_tooltip').click(function(){
  var chart = $("#tv_chart_container").highcharts();
  var x_tool = chart.xAxis[0].crosshair.label.enabled;
  var y_tool = chart.yAxis[0].crosshair.label.enabled
  if(x_tool == true && y_tool == true)
  {
      chart.xAxis[0].crosshair.update({
        enabled: false,
       });
      chart.yAxis[0].crosshair.update({
        enabled: false
        });
  }
  else
  {
    chart.xAxis[0].update({
      crosshair: {
        dashStyle: 'solid',
        color: '#248EC6',
        label:{
          enabled:true,
          padding:8,
        }
      }
      });
    chart.yAxis[0].update({
      crosshair: {
        dashStyle: 'solid',
        color: '#248EC6',
          label:{
            enabled:true,
            padding:8,
          }
        }
      });
  }
});

【问题讨论】：

你的意思是这样的：jsfiddle.net/gnhqvufh ?
@SebastianBochan 不，不是这样。我问的是切换选项十字准线不是工具提示而是轴十字准线
我修复了你的演示，它有一些错误。 jsfiddle.net/svq83uv8如果工作正常请告诉我
@SebastianBochan 谢谢。它帮助了我。

标签： highcharts highstock

【解决方案1】：

我修复了您的演示，其中有一些错误。

 $('#toggle_tooltip').click(function() {
        var chart = $("#container").highcharts();
        var x_tool = chart.xAxis[0].crosshair.label && chart.xAxis[0].crosshair.label.enabled;
        var y_tool = chart.yAxis[0].crosshair.label && chart.yAxis[0].crosshair.label.enabled;


        if (x_tool && y_tool) {
          chart.xAxis[0].update({
            crosshair: false
          });
          chart.yAxis[0].update({
            crosshair: false 
          });
        } else {
          chart.xAxis[0].update({
            crosshair: {
              dashStyle: 'solid',
              color: '#248EC6',
              label: {
                enabled: true,
                padding: 8,
              }
            }
          });
          chart.yAxis[0].update({
            crosshair: {
              dashStyle: 'solid',
              color: '#248EC6',
              label: {
                enabled: true,
                padding: 8,
              }
            }
          });
        }
      });

演示：

http://jsfiddle.net/svq83uv8

【讨论】：