Highcharts не реагирует на все серии в графике

Я создаю адаптивную диаграмму, которая содержит текстовое поле справа от области диаграммы. Текст обновляется при наведении указателя мыши на данные на графике.

Текстовое поле отзывчиво и отлично работает на меньшем экране при наведении на первый набор данных. Однако он не работает при наведении на 2-й и 3-й наборы данных.

Смотрите скрипку: http://jsfiddle.net/b0u10ndw/

Вот код для адаптивного раздела:

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                },
                series: { point: {  events: { mouseOver: function ()    {
                                 var chart = this.series.chart;
                                if (!chart.lbl) {
                                chart.lbl = chart.renderer.label('')
                                .add();
                                }
                                chart.lbl
                                    .show()
                                    .css({ width: '80' })
                                    .attr({ text: 'this is the text and I have to make it really long so that it goes for multiple lines' });
                                        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {
                                                align: 'right',
                                                x: 0, // offset
                                                verticalAlign: 'top',
                                                y: 50 // offset
                                                }), null, 'spacingBox');
                                }

                    } } },

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

Я попытался установить ширину текстового поля в процентах, но кажется, что он принимает только пиксельные единицы.

Источник

2 ответа

Решение

График ведет себя правильно в соответствии с документацией.

Особый случай - это объекты конфигурации, которые принимают массивы, например, xAxis, yAxis или series. Для этих коллекций параметр id используется для сопоставления нового набора параметров с существующим объектом. Если существующий объект с таким же идентификатором не найден, первый элемент обновляется. Так, например, установка chartOptions с элементом серии без идентификатора приведет к обновлению первой серии существующего графика.

смотрите: responseive.rules

Таким образом, решение (решение Серджиу также делает работу) определяет события в plotOptions.column объект.

 plotOptions: {
        column: {
          point: {
            events: {
              mouseOver: function() {
                ...
              }
            }
          }
        }
      },

пример: http://jsfiddle.net/b0u10ndw/1/

Я определил варианты в plotOptions.column вместо plotOptions.series (что имеет больше смысла), но оказалось, что эти опции приводят к ошибке (ошибка сообщается здесь).

Для примера allowPointSelect Серджиу - требование связать серию по идентификаторам:

В опциях графика:

series: [{
        name: 'Christmas Eve',
        data: [1, 4, 3],
        id: 's1'
    }, {
        name: 'Christmas Day before dinner',
        data: [6, 4, 2],
        id: 's2'
    }, {
        name: 'Christmas Day after dinner',
        data: [8, 4, 3],
        id: 's3'
    }],

В отзывчивых правилах:

 series:[{
                        allowPointSelect:true,
                      id: 's1'
                    }, {
                        allowPointSelect:true,
                      id: 's2'
                    }, {
                        allowPointSelect:true,
                      id: 's3'

пример: http://jsfiddle.net/hsd19y0y/3/

Источник

Я не думаю, что поддерживается переопределение объекта серии. Используя отзывчивую демонстрацию на старших графиках, я смог воспроизвести те же проблемы, что и у вас, используя простое переопределение свойств для объекта серии: http://jsfiddle.net/hsd19y0y/

Как вы можете заметить, когда вы делаете диаграмму маленькой, свойство allowPointSelect переопределяется только для первого столбца в каждой группе.

То же самое относится и к вашему примеру. Если вы поместите разные тексты для обычного mouseOver даже и для текста, указанного в отзывчивом объекте, вы заметите, что событие в объявлении отзывчивого запускается только для первого столбца в каждой группе. Смотрите здесь: http://jsfiddle.net/kokup8sx/

Чтобы добиться того, что вам нужно, вы можете изменить основной обработчик события mouseOver, чтобы он выполнял разные действия в зависимости от этого свойства:

chart.chartWidth

Что-то вроде:

mouseOver: function ()  {
    var chart = this.series.chart;
    if (!chart.lbl) {
        chart.lbl = chart.renderer.label('').add();
    }

    if(chart.chartWidth < 500){
        // handle for small screens
        chart.lbl.show().css({ width: '80' }).attr({ text: 's-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right',x: 0, verticalAlign: 'top',y: 50}), null, 'spacingBox');
    }
    }else{
        chart.lbl.show().css({ width: '180' }).attr({ text: 'l-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right',x: 0, verticalAlign: 'top',y: 50}), null, 'spacingBox');
    }
}
Источник
Другие вопросы по тегам