Highcharts как включить полосу прокрутки без установки мин или макс - PullRequest
Новая
       11

Highcharts как включить полосу прокрутки без установки мин или макс

0 голосов
/ 12 марта 2019

Как упомянуто здесь в этот ответ включение полос прокрутки на оси старшей диаграммы - довольно простой процесс простого включения следующих параметров:

Вариант 1

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

Затем включите полосу прокрутки 

  scrollbar: {
        enabled: true
    }

Вариант 2

Попробуйте установить min & max атрибутов для x-axis. 

xAxis: {
            categories: [...],
            min: 0,
            max:9
}

одна вещь, которая ошибочно представлена ​​в опции 1, состоит в том, что вам также необходимо выполнить еще один шаг установки мин / макс, то есть только включение полосы прокрутки само по себе недостаточно.

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

enter image description here

Установка статического макс. = 4 в этой скрипке действительно решает проблему для набора статических данных, но это не работает, когда число точек данных меньше 4, например, в этом случае:

enter image description here

Также в моем конкретном случае пользователи могут расширить диаграмму в модальном режиме, который должен быть больше и отображать больше информации, когда меньших карт / диаграмм недостаточно для отображения большого количества наборов данных, например, как издевались в этой демонстрации . В этом случае max = 4 достаточно для исходной высоты диаграммы, но не при расширении, потому что у нее больше пустых мест, когда max = 4. Поэтому было бы лучше, если нам точно не нужно устанавливать max, вместо этого, если мы можем разрешить прокрутку установив только ширину стержня, как показано ниже, имеет смысл 

pointWidth: 25
pointPadding: 0.2

, но установка только этого не работает в приведенной выше скрипке.

enter image description here

P.S прокрутка точно не включена в вышеупомянутом gif stackBlitz, но она должна работать нормально в предоставленной демоверсии blitz .

Есть ли какой-нибудь способ, которым мы можем включить полосы прокрутки и не должны устанавливать минимальное или максимальное значения вместо только pointWidth или, может быть, что-то еще и прокрутка работает как положено?

1 Ответ

1 голос
/ 12 марта 2019

Вам необходимо использовать свойство max, но вы можете рассчитать и установить его динамически: 

function setAxisMax() {
    var pointWidth = this.series[0].options.pointWidth,
        padding = 20;

    this.update({
        xAxis: {
            max: this.plotHeight / (pointWidth + padding) - 1
        }
    }, true, true, false);
}

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            load: setAxisMax
        }
    },
    ...
});

Живая демоверсия: http://jsfiddle.net/BlackLabel/evmkqrcw/

Справочник по API: https://api.highcharts.com/highcharts/xAxis.max

...