Отключить зависание на HighCharts
У меня есть построение круговой диаграммы с использованием библиотеки HighCharts, и вот моя диаграмма:
// http://jsfiddle.net/t2MxW/20890/
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
Но проблема в том, что я не хочу появляться всплывающей подсказки над мышью...
Можно ли отключить подсказку при наведении курсора?
Ответы
Ответ 1
Вам нужно установить атрибут tooltip
на false
, например:
tooltip: { enabled: false },
jsFiddle здесь
Здесь полный код для вашего случая:
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
tooltip: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
Ответ 2
Отключение всплывающей подсказки просто отключает всплывающую подсказку, но эффект наведения по-прежнему присутствует. Чтобы отключить эффект зависания, добавьте следующее к вашему сюжету:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
Ответ 3
Вы также можете отключить все отслеживание мыши в целом, как всплывающие подсказки, так и эффекты наведения:
(скопировать и вставить ссылку) http://api.highcharts.com/highcharts#series.enableMouseTracking
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/
plotOptions: {
series: {
enableMouseTracking: false
}
}
Ответ 4
Вы можете просто включить их, используя следующее:
tooltip: {
enabled: false
},
Ответ 5
вы можете просто отключить его, установив опцию
tooltip:{
enabled: false
}
Ответ 6
Обычно я просто отключаю стиль в css, чтобы при необходимости я мог получить доступ к событию hover в JS...
.highcharts-tooltip {
display: none;
}
Ответ 7
Как указано в принятом ответе, вам необходимо установить
tooltip: { enabled: false }
Примечание. Вы должны указать это как свойство вашего объекта Highcharts.Options
(т. Highcharts.Options
Объект опций диаграммы, а не свойство вашей серии). Итак, либо укажите его в JSON, который вы передаете в свой объект Highcharts.Chart
, либо укажите его как свойство объекта Highcharts.Options
который вы явно создаете, прежде чем передать его в Highcharts.Chart
См. Https://api.highcharts.com/highcharts/tooltip.enabled.
Ответ 8
Заголовок вопроса касается отключения зависания, поэтому на случай, если кто-то еще окажется здесь с этой целью, я остановлюсь на этом подробнее.
Чтобы полностью отключить выделение активной серии и отключить подсветку неактивной серии, вам нужно как отключить зависание (ala @SergeyB answer), так и установить неактивную непрозрачность равной 1. (Для получения более подробной информации см. Документацию по отключению зависания и отключению стилей неактивной прозрачности). Информация). Например:
{
// ...
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
}
Эти параметры состояния могут быть размещены 1) в объекте серии, в этом случае они будут применяться только к этой серии, или 2) в plotOptions.series, в этом случае они будут применяться к каждой серии в диаграмме. Например:
var chartOptions = {
series: [
{
name: "line1",
data: [[1, 1], [2, 2], [3, 3], [4, 4]],
// option 1a, series-specific
// states: {hover: {enabled: false}, inactive: {opacity: 1}},
},
{
name: "line2",
data: [[1, 2], [2, 1], [3, 5], [4, 6]],
// option 1b, series-specific
// states: {hover: {enabled: false}, inactive: {opacity: 1}},
}
],
plotOptions: {
series: {
// ... OR option 2, applies to entire chart
states: {hover: {enabled: false}, inactive: {opacity: 1}},
}
},
}
И, как отметил @ninedozen, вы можете полностью отключить все всплывающие подсказки/стили при наведении курсора мыши/стили нажатия, установив для plotOptions.series.enableMouseTracking
значение false.
Ответ 9
Заголовок вопроса касается отключения зависания, поэтому, если кто-то еще найдет себя здесь для этой цели, я подробно остановлюсь на ответе @SergeyB.
Есть несколько параметров, которые влияют на то, как при наведении мыши изменяется стиль серии. Каждый из них имеет разные эффекты в зависимости от типа серии. Я расскажу о строках линий и круговых диаграмм здесь, но, как правило, вы можете посмотреть в plotOptions.<seriesType>.states.hover
для стилей, примененных к текущим plotOptions.<seriesType>.states.inactive
сериям, и plotOptions.<seriesType>.states.inactive
для стилей, примененных к необнаруженный ряд (например, plotOptions.pie.states.hover). Ни один из этих параметров не влияет на стиль подсказки.
plotOptions.series.states.inactive
plotOptions.series.states.inactive влияет на стиль, применяемый ко всем сериям, которые в данный момент не отображаются. Чтобы они не plotOptions.series.states.inactive.opacity
в фоновом режиме, установите plotOptions.series.states.inactive.opacity
1.
var chartOptions = {
// ...
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
}
jsFiddle для линии
jsFiddle для пирога
plotOptions.series.states.hover
plotOptions.series.states.hover влияет на стиль, применяемый к сериям, над которыми наведен курсор. Например, для ряда линий по умолчанию используется сгущение ширины линии и применение ореола к ближайшей точке.
Чтобы отключить любой стиль текущей серии линий, установите для plotOptions.series.states.hover.enabled
значение false.
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
},
},
}
jsFiddle
К сожалению, если мы установим это на круговую серию, это приведет к тому, что наведенный срез уйдет на задний план с остальными неактивными срезами (см. Пример этого jsFiddle). Если мы хотим удалить все стили наведения, не затрагивая неактивный стиль, мы можем установить для plotOptions.series.states.hover.halo.size
значение 0 (которое удаляет ореол), а для plotOptions.pie.states.hover.brightness
значение 0 (которое удаляет осветляющий эффект) Обратите внимание, что, поскольку яркость характерна для круговой серии, она задокументирована в plotOptions.pie вместо plotOptions.series (хотя она работала для меня, даже когда я добавил ее в plotOptions.series).
var chartOptions = {
// ...
chart: {
type: "pie",
},
plotOptions: {
series: {
states: {
hover: {
halo: {
size: 0,
},
// this worked for me even though it not
// documented under plotOptions.series:
//brightness: 0,
},
},
},
pie: {
states: {
hover: {
brightness: 0,
},
},
},
},
}
jsFiddle
plotOptions.series.stickyTracking
Если вы используете ряд линий или областей, вы, возможно, заметили, что как только вы наводите курсор на график, даже если вы не касаетесь серии, ближайшая серия получит стиль наведения, а остальные - неактивный стиль. Это связано с тем, что plotOptions.series.stickyTracking по умолчанию имеет значение true для рядов линий и областей. Если вы установили plotOptions.series.stickyTracking
в false, наведение и неактивное моделирование будут применяться только при наведении курсора на линию.
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
stickyTracking: false,
},
},
}
jsFiddle
plotOptions.series.enableMouseTracking
Как отметил @ninedozen, вы можете полностью отключить все реагирующие взаимодействия, основанные на движении мыши, установив для plotOptions.series.enableMouseTracking
значение false. Обратите внимание, что это также отключит всплывающие подсказки в дополнение к наведению/неактивному стилю.
Варианты объема
Чтобы применить эти параметры ко всем сериям на всем графике, поместите их в plotOptions.series
. Чтобы применить их только к определенным типам серий (или, если параметр относится только к определенным сериям), поместите их в plotOptions.<seriesType>
. Чтобы применить их к определенной серии, поместите их в параметры этой серии.
var chartOptions = {
series: [
{
name: "series1",
type: "line",
data: [...],
// these options will only apply to series1, not series2 or series3
states: {...},
},
{
name: "series2",
type: "line"
data: [...],
},
{
name: "series3",
type: "pie"
data: [...],
}
],
plotOptions: {
// these options will apply to all series in the chart
series: {states: {...}},
// these options will only apply to series of type line
// i.e. series1 and series2
line: {states: {...}}
}
}