Несколько осей на тепловой карте Highcharts

Цель

Я работаю с тепловой картой Highcharts для представления данных, которые должны иметь два дисплея YAxis (слева и один справа). Оба должны относиться к типу «категорий» (то есть управляться строками, а не числовыми значениями).

Проблема

Если задано несколько осей Y, отображаются только метки для первой.

Код

Вот скрипка с моим кодом. Особо хочу обратить ваше внимание на эти строки:

yAxis: [{
            categories: ["For instance, on the planet Earth, man had always assumed that he was more intelligent than dolphins because he had achieved so much—the wheel, New York, wars and so on—whilst all the dolphins had ever done was muck about in the water having a good time. But conversely, the dolphins had always believed that they were far more intelligent than man—for precisely the same reasons",
                         'The man who invented the Total Perspective Vortex did so basically in order to annoy his wife.',
                         'The major problem - one of the major problems, for there are several - one of the many major problems with governing people is that of whom you get to do it; or rather of who manages to get people to let them do it to them.',
                         'My doctor says that I have a malformed public-duty gland and a natural deficiency in moral fibre',
                         'He felt uncertain as to whether the fourth drink had understood all that, so he sent down a fifth to explain the plan more fully and a sixth for moral support.'],
            title: null,
            gridLineWidth: 0,
            labels: {
                style: {
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    float: 'left'
                }
            }
        },{
            categories: ["1/7", "2/7", "3/7", "4/7", "5/7"],
            title: null,
            opposite: true,
            // Note: The following two lines appear to be unnecessary
            type: 'category',
            visible: true
        }],

Обратите внимание, что первый столбец оси y правильно отображается в левой части диаграммы. Также обратите внимание, что нет визуального представления второй оси y (которая должна отображаться с правой стороны графика, между графиком и легендой).

Что интересно, если я переупорядочу две оси Y, категории справа появятся, а категории слева исчезнут. Дополнительно интересно; если осям присвоены заголовки (title: null удален или изменен), заголовки появятся в правильном месте.

Документация

Код, кажется, полностью соответствует официальным примерам для двойной оси Y. Даже копирование этого примера кода в точности вызывает тот же сбой. Я знаю, что тип диаграммы HeatMap не обязательно является частью основной библиотеки, но я не обнаружил никаких указаний на то, что этот тип не должен работать с тепловой картой.

Заключение

Мы будем очень благодарны за любую помощь, которая может быть предоставлена ​​для отображения меток оси Y на обеих сторонах графика. Заранее спасибо.


person ConnorCMcKee    schedule 11.05.2016    source источник
comment
Интересно. Если вы посмотрите на диаграмму, вы увидите, что у вас есть 2 g компонента класса highcharts-axis-labels highcharts-yaxis-labels в модели DOM. Второй, похоже, предназначен для вашей второй оси yAxis, но это пустой элемент в DOM.   -  person wergeld    schedule 11.05.2016
comment
Я заметил это, что является одной из основных причин, по которым я подозреваю, что это проблема между тепловыми картами и функцией многоосевой обработки (а не ошибка в моей реализации).   -  person ConnorCMcKee    schedule 11.05.2016
comment
Да, я думаю, что highcharts игнорирует любые назначения дополнительных осей. Можете ли вы добиться желаемого результата с помощью какой-либо маркировки основных осей?   -  person wergeld    schedule 11.05.2016
comment
Хм, неплохая идея. Однако я не решаюсь сделать это, потому что эта графика является частью большой библиотеки аналогичных по стилю графики, каждая из которых использует соответствующие метки оси Y. Они определенно должны выглядеть визуально последовательными, и в идеале они также должны быть написаны в некоторой последовательности. Тем не менее, я поиграю с этим и буду держать в кармане, если возникнет необходимость.   -  person ConnorCMcKee    schedule 11.05.2016
comment
Как насчет настройки параметра connectedTo, jsfiddle.net/3zun7pz4?   -  person Sebastian Bochan    schedule 12.05.2016
comment
Спасибо, Себастьян! Это именно то, что мне было нужно. Если вы превратите это в ответ, я проголосую и приму его (если вы этого не сделаете, я сам ввожу его и приму).   -  person ConnorCMcKee    schedule 12.05.2016
comment
@ConnorCMcKee Я сделал;)   -  person Sebastian Bochan    schedule 16.05.2016


Ответы (1)


Вы можете использовать параметр connectedTo.

yAxis: [{
        type: 'category',
            categories: ["For instance, on the planet Earth, man had always assumed that he was more intelligent than dolphins because he had achieved so much—the wheel, New York, wars and so on—whilst all the dolphins had ever done was muck about in the water having a good time. But conversely, the dolphins had always believed that they were far more intelligent than man—for precisely the same reasons", 'The man who invented the Total Perspective Vortex did so basically in order to annoy his wife.', 'The major problem - one of the major problems, for there are several - one of the many major problems with governing people is that of whom you get to do it; or rather of who manages to get people to let them do it to them.', 'My doctor says that I have a malformed public-duty gland and a natural deficiency in moral fibre', 'He felt uncertain as to whether the fourth drink had understood all that, so he sent down a fifth to explain the plan more fully and a sixth for moral support.'],
            title: null,
            gridLineWidth: 0,
            labels: {
                style: {
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    float: 'left'
                }
            }
        },{
        linkedTo: 0,
            categories: ["1/7", "2/7", "3/7", "4/7", "5/7"],
            title: null,
            opposite: true,
            // Note: The following two lines appear to be unnecessary
            type: 'category',
            visible: true
        }],

Пример:

person Sebastian Bochan    schedule 16.05.2016