Блог

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

Прямо сейчас это так

line1: 23
мин / максимальный диапазон: 21-25
line2: 24
мин / максимальный диапазон: 22-27

Вместо этого я хочу

строка 1: 23
мин. / максимальный диапазон: 21-25

когда я навожу указатель на line1 и информацию о line2, когда я навожу на нее курсор.

Я могу установить всплывающую подсказку: {shared: false} в настройках, однако теперь она больше не показывает минимальные / максимальные диапазоны.

ниже приведена ссылка jsfiddle для моего графика

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

Пример: http://jsfiddle.net/fC4AN/5 /

  formatter:function(){

                var x = this.x,
                    chart = this.series.chart,
                    relatedId = this.series.options.relatedId || this.series.options.id,
                    relatedSerie = chart.get('blackArea'),
                    txt = this.low === UNDEFINED ? 'y1: '   this.y : ' low: '   this.low   ' high: '   this.high;


                $.each(relatedSerie.data,function(i,p){
                    if(p.x === x) {
                        txt = p.low === UNDEFINED ? '<br>y: ' p.y : ' low: '   p.low   ' high: '   p.high;
                    }
                });

                return txt;

            },
  

Я также нашел один способ решить эту проблему,

Я передаю данные каждого диапазона в ряд, как в примере ниже

 {
    name: "line 1",
    data: averages1,
    ranges: ranges1,
    zIndex: 1,
    marker: {
        fillColor: 'white',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[0]
    }
}, {
    name: "Min/Max Range",
    data: ranges1,
    type: 'arearange',
    lineWidth: 0,
    linkedTo: ':previous',
    color: Highcharts.getOptions().colors[0],
    fillOpacity: 0.3
}
  

а затем в программе форматирования я получаю доступ к значениям диапазона точек следующим образом

 tooltip: {
    formatter: function() {
        var that = this;
        var min, max;
        if(this.series.options.hasOwnProperty("ranges"))
            $.each(this.series.options.ranges, function (i, point) {
                if(point[0] == that.x) {
                    min = point[1];
                    max = point[2];
                }
            });
            return "min/max range: "   min   " - "   max;
        }
    }
}
  

пример jsfiddle

Вы можете установить для параметра всплывающей подсказки «общий» значение false или просто удалить его.

     $('#container').highcharts({

        title: {
            text: 'July temperatures'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: false,
            valueSuffix: '°C'
        },
        // etc.
    });