如何在Highcharts中通过单击事件隐藏坐标轴十字线

Question

我希望实现点击事件时的坐标轴十字线。初始情况下，十字线是启用状态。当点击切换提示框按钮时，我们需要隐藏十字线。

这是我的代码：

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

- Pilaventhiran

---

你的意思是这样吗：http://jsfiddle.net/gnhqvufh/？ - Sebastian Bochan

@SebastianBochan 不是这样的。我在问关于切换选项准星，不是用工具提示，而是用坐标轴准星。 - Pilaventhiran

我修复了你的演示，其中有一些错误。http://jsfiddle.net/svq83uv8/ 如果正常工作，请告诉我。 - Sebastian Bochan

@SebastianBochan 谢谢，老兄。这对我很有帮助。 - Pilaventhiran

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

Demo:

• http://jsfiddle.net/svq83uv8

- Sebastian Bochan