Подтвердить что ты не робот

Отключить зависание на 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
               ]
       }]
    });

Но проблема в том, что я не хочу появляться всплывающей подсказки над мышью...

Можно ли отключить подсказку при наведении курсора?

4b9b3361

Ответ 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: {...}}
    }
}