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

Question

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

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

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

Answer 1

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        var chart = this.points[0].series.chart; //get the chart object
        var categories = chart.xAxis[0].categories; //get the categories array
        var index = 0;
        while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays           
        $.each(chart.series, function(i, series) { //loop through series array
            s += '<br/>'+ series.name +': ' +
                series.data[index].y +'m';     //use index to get the y value
        });           
        return s;
    },
    shared: true
}

Answer 2

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

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

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. Если вы хотите, чтобы ваша серия invisbile не появлялась в легенде, вы можете добавить атрибут showInLegend: false. Его данные все равно будут отображаться во всплывающей подсказке.

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

Answer 3

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

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;
}

Answer 4

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

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

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

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

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