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

                    } } },

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

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


jquery css responsive highcharts textbox
person JH_VtM    schedule 04.01.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

см.: responsive.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/

person morganfree    schedule 05.01.2017
comment
Спасибо - это то, чего мне не хватало. В итоге я установил ширину текстового поля на chartwidth/3: chart.lbl .css({ width: chart.chartWidth/3}). Затем я устанавливаю ширину диаграммы и правое поле для каждого из необходимых мне разрешений экрана. Одна вещь, с которой у меня возникли проблемы, заключалась в том, чтобы заставить адаптивные правила Highcharts работать для более чем двух размеров экрана, поэтому вместо использования адаптивных правил я создал функцию, которая запускается при загрузке диаграммы. - person JH_VtM; 06.01.2017

arrow_upward
0
arrow_downward

Я не думаю, что переопределение объекта серии поддерживается. Используя отзывчивую демонстрацию на highcharts, я смог воспроизвести те же проблемы, что и у вас, используя простое переопределение свойства для объекта серии: 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');
    }
}
person Sergiu    schedule 04.01.2017