Bagaimana cara membuat bagan rentang kolom di Highchart menggunakan fungsi jangkauan dan navigator?

Saya memiliki kebutuhan plot sejarah lari dari tugas di Highcharts. Itu perlu menunjukkan bahwa menjalankan riwayat tugas sebagai bilah horizontal. Ada persyaratan tambahan yang saya tambahkan sebagai pembaruan di bawah ini. Baru-baru ini saya mengetahui bahwa invertedopsi tidak didukung di StockChart dan bahwa hanya navigator & rangeSelector yang tersedia di StockChart. Oleh karena itu saya menggunakan fungsi tersebut.

Jadi untuk mencapai persyaratan, saya membuat sesuatu yang mirip dengan contoh jsfiddle ini (ditemukan di suatu tempat saat menjelajah tidak ingat sumbernya) dan berakhir dengan tautan plunker ini dengan bantuan dari pertanyaan saya sebelumnya , terima kasih kepada Pawel Fus

Memperbarui pertanyaan untuk menghindari kebingungan

Persyaratan tambahan:

Tampilkan hanya tugas-tugas yang berjalan dalam rentang tanggal dan waktu tertentu . Jika ada terlalu banyak proses, seperti lebih dari 10 proses, maka perlu ada cara untuk menampilkan hanya 10 tugas yang terlihat dengan sumbu y yang dapat di-scroll untuk menampilkan tugas lain. tautan plunker ke masalah

Penjelasan masalah plunker diatas.

Jika Anda memeriksa tangkapan layar di bawah ini dari plunker di atas, rentang waktunya adalah dari 12/12/2014 09:32:26hingga 12/12/2014 10:32:26dan hanya ada 2 tugas yang telah berjalan m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Namun saya dapat melihat tugas lain di antaranya LILLY_Cyang bahkan tidak berjalan dalam rentang waktu ini. (Dalam data aktual, ada lebih dari 10 tugas yang mengacaukan bagan ini yang bahkan tidak termasuk dalam rentang waktu tanggal ini)

Juga jika Anda perhatikan di pojok kanan bawah waktu bergeser dari 09:38ke 19:20. 19:20adalah waktu akhir untuk m_ZIG2_HCP_MERGE_IB_CNtugas. Di bawah ini adalah opsi bagan saya

    var chart_options = {
            chart: {
                renderTo: 'container',
                height: 600
            },
            title: {
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'datetime',
                gridLineWidth: 1,
                tickInterval: 1 * 3600 * 1000,
                dateTimeLabelFormats: {
                    month: '%b %e, %Y'
                }
            },
            yAxis: {                    
                tickInterval: 1,
                gridLineWidth: 1,
                labels: {
                    formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Task'
                }
            },
            rangeSelector: {
                selected: 0,
                buttons: [ {
                    type: "minute",
                    count: 60,
                    text: "1h"
                }, {
                    type: "minute",
                    count: 180,
                    text: "3h"
                }, {
                    type: "minute",
                    count: 300,
                    text: "5h"
                }],
                inputDateFormat: '%m/%d/%Y %H:%M:%S',
                inputEditDateFormat: '%m/%d/%Y %H:%M:%S',
                inputBoxWidth: 120
            },
            navigator: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            tooltip: {
                shared: false,
                formatter: function() {
                    var str = '';
                    str += 'Task: ' + this.series.name + '<br>';
                    str += 'From: ' + Highcharts.dateFormat('%m/%d/%y %H:%M', this.point.from) + '<br>';
                    str += 'To: ' + Highcharts.dateFormat('%m/%d/%y %H:%M', this.point.to) + '<br>';
                    return str;
                }
            },
            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: true
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    },
                    states:{
                        hover:{
                            lineWidth:10
                        }
                    }
                },
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                var query = '{ "task_id": "'+this.task_id+'","start_time": '+this.from+',"exclude_interval": '+opExcludeMinutes+',"size": 10 }';
                                $scope.taskName = this.series.name;
                                $scope.isTaskSelected = false;
                                $scope.operationalReportAgentTaskHistoryServiceRequest(query);
                            }
                        }
                    }
                }
            },
            series: seriesData
        };

Jadi setelah beberapa jam menggali, saya baru saja mengetahui pelakunya (atau saya sangat berharap demikian). Masalahnya adalah definisi Anda tentang yAxispemformat label:

yAxis: {
  tickInterval: 1,
    gridLineWidth: 1,
    labels: {
    formatter: function() { // THIS IS THE PROBLEM
      if (tasks[this.value]) {
        return tasks[this.value].name;
      }
    }
  },
  startOnTick: false,
    endOnTick: false,
    title: {
    text: 'Task'
  }
},

Anda tidak benar-benar memeriksa apakah Anda harus menampilkan label sesuai dengan task.intervals(lihat json.js). Pembaruan sederhana ( Plunker ) dari pemformat tampaknya berfungsi:

  yAxis: {
    tickInterval: 1,
    gridLineWidth: 1,
    labels: {
      formatter: function () {
        console.log("scripts.js - yAxis.labels.formatter", this.value);
        if (tasks[this.value]) {

          //if (tasks[this.value].name === 'LILLY_C') {
            var _xAxis = this.chart.axes[0];
            var _task = tasks[this.value];
            var _show = false;

            // Not optimized for large collections
            for (var _i = 0; _i < _task.intervals.length; _i++) {
              var _int = _task.intervals[_i];
              if (_xAxis.min <= _int.to) {
                _show = true;
              }
            }

            console.log("scripts.js - yAxis.labels.formatter",
              tasks[this.value].name,
              _show,
              _xAxis.min,
              _xAxis.max,
              _task.intervals
            );

            if (_show) {
              return tasks[this.value].name;
            } else {
              return;
            }
          //}

          //return tasks[this.value].name;
        }
      }
    },
    startOnTick: false,
    endOnTick: false,
    title: {
      text: 'Task'
    }
  },

Lihat Plunker untuk demo .

Arti dari label yAxis adalah: Tampilkan label jika Anda melihat run di grafik atau jika ada run di sebelah kanan grafik. Harap ubah ketentuannya

if (_xAxis.min <= _int.to) {

sesuai keinginan Anda.

Penafian: Saya tidak menggunakan Highchart, jadi jawaban ini mencoba menjelaskan masalah dan tidak menyarankan cara Highchart untuk memecahkan masalah.

Pelajaran yang dipelajari:

• yaxis-plugin.js tidak relevan dengan masalah.
• Highstock.js adalah pustaka sumber terbuka ( highstock.src.js ). Proses debug apa pun jauh lebih mudah jika Anda men-debug kode sumber asli. Kode yang diperkecil menambah kerumitan dan tebakan yang tidak perlu. Saya telah mengunduh perpustakaan dan menambahkan beberapa console.log()untuk mencari tahu apa yang sedang terjadi.