Как установить фиксированные заголовки диаграммы Ганта при вертикальной прокрутке

Я пытаюсь создать график Ганта. Я основал эту диаграмму на примере управления ресурсами. Пока много хорошего! У меня есть несколько проблем, о которых я сделаю отдельные сообщения.

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

Вот сценарий: https://jsfiddle.net/eddiem9/h9qw5rsj/15/

chart = Highcharts.ganttChart('container', {
series: series,
scrollablePlotArea: {
    minHeight: 700
},
plotOptions: {
    series: {
        color: '#FF0000'
    }
},
scrollbar: {
    enabled: true
},
title: {
    text: 'Irrigation Schedule',
    style: {
        color: '#000000',
        fontWeight: 'bold',
        fontSize: '24px'
    }
},

tooltip: {
    pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
        labels: {
            format: '{value:%H}' // hour of the day (not working)
        },
        tickInterval: 1000 * 60 * 60, // HOUR
    }, {
        labels: {
            format: '{value:%B %e}' // day name of the week
        },
        tickInterval: 1000 * 60 * 60 * 24, // Day
    }

],
yAxis: {
    type: 'category',
    grid: {
        columns: [{
                title: {
                    text: 'Pump'
                },
                categories: map(series, function (s) {
                    return s.PumpName;
                })
            }, {
                title: {
                    text: 'Zone'
                },
                categories: map(series, function (s) {
                    return s.IrrigationZoneName;
                })
            }, {
                title: {
                    text: 'Status'
                },
                categories: map(series, function (s) {
                    return s.CurrentStatus;
                })
            }
        ]
    }
}

})

Заранее спасибо!

Эдди


highcharts vertical-scrolling highcharts-gantt
person eddiem9    schedule 05.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы были так близки к тому, чтобы это сработало, просто допустили небольшую ошибку. Объект scrollablePlotArea должен быть определен внутри объекта диаграммы.

Демо: https://jsfiddle.net/BlackLabel/bu5hfxm1/

  chart: {
    scrollablePlotArea: {
      minHeight: 700
    }
  },

API: https://api.highcharts.com/gantt/chart.scrollablePlotArea

РЕДАКТИРОВАТЬ:

Вникнув в проблему, я думаю, что лучшим вариантом будет использование полосы прокрутки для yAxis, чем scrollablePlotArea.

Демо: https://jsfiddle.net/BlackLabel/s013uqa5/

  • требуется запасной модуль

  • Пример конфигурации опций для yAxis:

    scrollbar: {
  enabled: true,
  showFull: false
},
max: 5,

API: https://api.highcharts.com/highstock/yAxis.scrollbar

person Sebastian Wędzel    schedule 05.02.2020
comment
Привет, Себастьян, Спасибо за ответы на оба моих вопроса. (Скоро у меня будет другой пост). Каждый ответ индивидуально работал великолепно. Однако когда я их совмещаю, результат не очень хороший. Добавление ссылки на другой пост здесь: ссылка Результат таков: - Заголовки для моих категорий прокручиваются со страницы - есть небольшой блок, который показывает только 4 строки - Я вижу прокрученные строки под заголовками диаграммы Ганта - Кажется, я не могу прокрутите до всех строк - person eddiem9; 05.02.2020
comment
Если честно - не понимаю, в чем проблема. Не могли бы вы поделиться каким-нибудь изображением? - person Sebastian Wędzel; 06.02.2020
comment
Привет, @Sebastian, мне пришлось выпустить, не исправив это, но теперь я вернулся к этому. В этой скрипке: ссылка Это довольно близко к тому, что я надеюсь достичь. Несколько вещей, которые все еще остаются проблемными: 1. Если я прокручиваю диаграмму Ганта, мои метки сетки тоже прокручиваются. Есть ли способ закрепить их на месте с сеткой. 2. В java-скрипте для minHeight установлено значение 800, а высота контейнера - 799 пикселей. Мне пришлось поиграть с этими числами. При использовании моя диаграмма будет иметь разные размеры. Я бы хотел, чтобы числа можно было настраивать. - person eddiem9; 31.03.2020