Saya ingin membuat bagan rentang kolom Highcharts untuk menunjukkan runtime aplikasi, dengan tanggal yang ditampilkan pada sumbu x. Namun, total jangka waktu yang perlu ditampilkan lebih dari yang cukup sesuai dengan lebar layar. Saya melihat bahwa highstock.js memiliki fitur scrollbar, tetapi saya juga melihat bahwa menambahkan referensi ke highstock.js, dan menambahkan properti scrollbar di sumbu yang sesuai tidak cukup untuk membuat scrollbar muncul. Saya telah memberikan contoh pada jsfiddle di http://jsfiddle.net/k21pzh60/3/ . Jika saya hanya ingin jangka waktu dari 10 September dan seterusnya untuk ditampilkan di layar secara default, dengan bilah gulir yang memungkinkan pengguna untuk mundur dalam waktu untuk melihat tanggal 6 September, apakah itu mungkin?

Berikut adalah HTML dari 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>

Dan js dari 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],            ]
        }]


    });

});

Terima kasih!

0
user756366 20 September 2019, 00:32

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan chart.scrollablePlotArea untuk mencapai apa yang Anda harapkan di Highcharts.

Kode:

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

Demo:

Referensi API:

1
Wojciech Chmiel 20 September 2019, 08:11