如何通过Highcharts中的onclick事件隐藏Axes十字准线

Question

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

这是我的代码

这里是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,
          }
        }
      });
  }
});

Answer 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