Могу ли я включить полосу прокрутки для оси x даты и времени в диаграмме столбцов Highcharts - PullRequest
Новая
       20

Могу ли я включить полосу прокрутки для оси x даты и времени в диаграмме столбцов Highcharts

0 голосов
/ 20 сентября 2019

Я хочу сделать диаграмму диапазона столбцов Highcharts, чтобы показать время выполнения приложения с датой, отображаемой на оси x.Тем не менее, общий период времени, который должен быть показан, больше, чем разумно вписывается в ширину экрана.Я вижу, что highstock.js имеет функцию полосы прокрутки, но я также вижу, что добавления ссылки на highstock.js и добавления свойства полосы прокрутки на соответствующей оси недостаточно для появления полосы прокрутки.Я поместил пример в jsfiddle на http://jsfiddle.net/k21pzh60/3/. Если я хочу, чтобы по умолчанию на экране отображался только таймфрейм с 10 сентября, с полосой прокрутки, которая позволяет пользователю вернуться назад во времени, чтобы увидеть 6 сентябрязапустить, это возможно?

Вот HTML-код JsFiddle: 

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

И JS из JsFiddle: 

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Times'
        },

        subtitle: {
            text: 'Planned and Actual Runtimes'
        },

        xAxis: {
            categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
        },

        yAxis: {
            type: 'datetime',
            title: {
                text: 'DateTime'
            }
        },

        tooltip: {
          formatter: function () {
            var duration = this.point.high - this.point.low;
            var hours1=parseInt(duration/3600000);
            var mins1=parseInt((parseInt(duration%3600000))/60000);
            return 'Duration: ' + (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
                    }
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                return Highcharts.dateFormat('%H %M',this.y);
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

       series: [{
            name: 'Planned Runtime',
            data: [
                ['a', 1568242800000, 1568246400000],
                ['b', 1568044800000, 1568044800000],
                ['c', 1567728000000, 1567728180000],
                ['i', 1568156400000, 1568160000000]
            ]
        }, {
            name: 'Actual Runtime',
            data: [
                ['a', 1568329200000, 1568329200000],
                ['b', 1568300400000, 1568300400000],
                ['c', 1568300400000, 1568307600000],
                ['d', 1568275200000, 1568390400000],
                ['e', 1568296800000, 1568296800000],
                ['f', 1568296800000, 1568300400000],
                ['g', 1568300400000, 1568300400000],
                ['h', 1568260800000, 1568264400000],
                ['i', 1568221200000, 1568221200000],            ]
        }]


    });

});

Спасибо!

1 Ответ

1 голос
/ 20 сентября 2019

Вы можете использовать chart.scrollablePlotArea для достижения того, что ожидаете в Highcharts.

Код: 

chart: {
  type: 'columnrange',
  inverted: true,
  scrollablePlotArea: {
    minWidth: 2000,
    scrollPositionX: 2000
  }
}

Демонстрация:

Ссылка API:

...