Question

我正在调整图表高度，在移动设备上，我触摸该图表并滑动手指以查看该图表中的值。

问题是当我按住触摸时，附近的文本会突出显示，放开时它会询问我是否要复制，全选等等。

由于附近的文本是图例中Axis的标签和系列名称，因此有没有办法在触摸高图表图时禁用此文本选择功能？

我试图使用响应模式简单地隐藏Axis标签，因为移动设备无论如何都没有空间，但是我无法使它适用于addAxis（）并且仍然选择了图例系列文本。

不幸的是，我没有找到任何仅适用于情节/传说区域的高图表示例。

我已经在CSS中找到了类似的代码，但是页面上还有其他区域需要选择，它们只是不在图中。

.row-of-icons {
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
user-select: none;          /* Likely future */      
}

我希望能够在高图上触摸并按住图形，而不会出现“复制，共享，全选”叠加层。

按住文本区域时，几乎在任何移动设备上都会发生这种情况。

Answer 1

您可以通过将附加的CSS规则添加到图表容器元素来实现预期的效果。检查代码并在下面发布的演示中对其进行测试。

代码：

Highcharts.chart('container', {
  series: [{
    data: [
      439,
      525,
      571,
      696,
      970,
      119,
      137,
      154
    ]
  }],
});

#container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#footer,
#header {
  width: 100%;
  height: 100px;
  background-color: #555;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="header">header</div>
<div id="container"></div>
<div id="footer">footer</div>

演示：

代码编辑器：https://jsfiddle.net/BlackLabel/1ac63t8o/1/
结果（在移动设备上进行测试）：https://jsfiddle.net/BlackLabel/1ac63t8o/1/show

如何防止用户选择轴标签

1 个答案: