Как предотвратить выбор пользователем меток осей

Question

Я настраиваю график высоких диаграмм, и на мобильном телефоне я касаюсь графика и провожу пальцем, чтобы увидеть значения на графике.

Проблема возникает, когда я держу сенсорный экран, выделенный текст подсвечивается, и когда я отпускаю его, он спрашивает, хочу ли я скопировать, выбирать все и т. Д.

Поскольку соседний текст представляет собой метки оси и названия серий в легенде, есть ли способ отключить эту функцию выделения текста, касаясь графика высокой диаграммы?

Я попытался просто скрыть метки 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