Отображение всплывающей подсказки для невидимых серий в Highcharts

Я пытаюсь отобразить пользовательскую всплывающую подсказку с помощью Highcharts. Вы можете найти пример кода здесь: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

При наведении курсора на диаграмму видно, что всплывающая подсказка содержит значения только из серии 2, но не из серии 1 (которая невидима). Когда вы нажимаете «Серия 1» в легенде, вы можете увидеть значения из Серии 1 во всплывающей подсказке.

РЕДАКТИРОВАТЬ: нет code для фиксации, просто исправление linkrot/соблюдение правил редактирования...
Есть ли способ отобразить значения из невидимой серии во всплывающей подсказке?


person j0nes    schedule 26.09.2011    source источник


Ответы (4)


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

formatter: function() {
    var index = $.inArray(this.x, categories);
    var s = '<b>'+ this.x +'</b>';

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index];
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index];

    return s;
}
person eolsson    schedule 26.09.2011

Другой способ сделать это — сделать невидимыми некоторые атрибуты серии, а не всю серию целиком. Это позволит вам увидеть его во всплывающей подсказке и легенде.

Вот что я сделал:

  1. Во-первых, я установил цвет линии невидимого ряда на «прозрачный».
  2. Затем я установил цвет заливки невидимых маркеров серии на «прозрачный».
  3. Наконец, я отключил состояние наведения для маркеров. Это предотвратит появление затемненных светлых кругов при наведении курсора мыши на каждую точку в видимом ряду.

Вот модифицированная версия вашей оригинальной скрипки с этими изменениями: http://jsfiddle.net/brightmatrix/fDNh9/ 184/

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    lineColor: 'transparent',       // make the line invisible
    marker: { 
        fillColor: 'transparent',   // make the line markers invisible
        states: {
            hover: {
                enabled: false      // prevent the highlight circle on hover
            }
        }
    }
}, {
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]

Два пункта на заметку:

  1. Я использовал атрибут enableMouseTracking: false с другими невидимыми сериями, чтобы пользователи не взаимодействовали с ними (для достижения визуальных эффектов). Если вы установите это для своей невидимой серии, это предотвратит отображение данных серии в вашей всплывающей подсказке.
  2. Если вы хотите, чтобы ваша невидимая серия не появлялась в легенде, вы можете добавить атрибут showInLegend: false. Его данные по-прежнему будут отображаться во всплывающей подсказке.

Я надеюсь, что это поможет другим, кто сталкивается с этим вопросом.

person Mike Zavarello    schedule 24.08.2016

Слишком поздно для ответа, но это то, что я сделал. Постройте диаграмму и сделайте цвет прозрачным. Нанес его на противоположную ось Y и установил max равным нулю. Установите для alignTicks значение false. Что-то вроде этого.

chart: {
        alignTicks: false,
        type: 'line'
    },

Тогда единственное, что нужно, это изменить значение цвета в форматировщике всплывающей подсказки, поскольку метка будет прозрачной.

Надеюсь, это поможет кому-то.

Счастливого обучения :)

person Vatsal    schedule 15.09.2016

person    schedule
comment
Спасибо, принимаю это решение, потому что я могу работать со встроенными массивами данных из Highcharts. - person j0nes; 27.09.2011
comment
Да, и если вы читаете диаграмму из this.point, а также из this.points, она будет работать и для не общих всплывающих подсказок. - person eolsson; 27.09.2011
comment
@BheshGurung есть ли способ сделать это без использования массива категорий? Мне также нужно показать второстепенные тики на графике, но я не могу их показать, так как использую категорию для xAxis. Пожалуйста, ответьте в ближайшее время. - person saurjk; 20.04.2013
comment
Это больше не работает для меня, используя последние Highcharts: когда итератор $.each попадает в скрытую серию, series.data является пустым массивом. - person Ilkka; 24.06.2014
comment
вы можете сохранить цикл while, используя: var index = category.indexOf(this.x); - person Michel Tobon; 27.11.2017