Aralık ve gezgin işlevlerini kullanarak Highcharts'ta bir sütun aralığı grafiği nasıl oluşturulur?

Ben arsa için bir gereksinim var çalıştırma tarihinin a görev Highcharts içinde. Görevlerin geçmişini yatay bir çubuk olarak çalıştırdığını göstermesi gerekir. Aşağıda güncelleme olarak eklediğim ek gereksinimler var. Son zamanlarda, bu invertedseçeneğin StockChart'ta desteklenmediğini ve StockChart'ta yalnızca navigator & rangeSelector'ın mevcut olduğunu öğrendim . Bu nedenle bu işlevleri kullanıyorum.

Yani benzer bir şey yarattı gereksinimi elde etmek için bu jsfiddle örnekte (tarama kaynağını hatırlamıyorum yerde iken bulunur) ve ile sona erdi bu plunker bağlantısını önceki yardımıyla sorusuna , sayesinde Pawel FUS

Karışıklığı önlemek için soru güncelleniyor

Ek gereksinimler:

Göster sadece bu görevleri ran bir özellikle tarih ve saat aralığında . 10'dan fazla çalıştırma gibi çok fazla çalıştırma olması durumunda, diğer görevleri göstermek için kaydırılabilen bir y ekseni ile yalnızca 10 görevi görünür bir şekilde görüntülemenin bir yolu olması gerekir. soruna daha fazla bağlantı

Yukarıdaki plunker'ın problem açıklaması.

Eğer plunker yukarıdan aşağıdaki ekran işaretlerseniz, zaman aralığı arasındadır 12/12/2014 09:32:26için 12/12/2014 10:32:26ve tükendi sadece 2 görev vardır m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Ancak aralarında LILLY_Cbu tarih aralığında çalışmayan başka bir görev görebiliyorum . (Gerçek verilerde, bu çizelgeyi karıştıran ve bu tarih zaman aralığının altına bile girmeyen 10'dan fazla görev vardır)

Ayrıca en sağ alt köşede zamanın 'den' 09:38e kaydığını fark ederseniz 19:20. görev 19:20için bitiş zamanı m_ZIG2_HCP_MERGE_IB_CN. Grafik seçeneklerim aşağıdadır

    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
        };

Bu yüzden, birkaç saatlik kazıdan sonra, suçluyu yeni buldum (ya da gerçekten öyle olmasını umuyorum). Sorun, yAxisetiket biçimlendirici tanımınızdır :

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'
  }
},

Etiketi task.intervals(bkz. json.js) 'A göre görüntülemeniz gerekip gerekmediğini kontrol etmezsiniz . Biçimlendiricinin basit bir güncellemesi ( Plunker ) çalışıyor gibi görünüyor:

  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'
    }
  },

Demo için Plunker'a bakın .

YAxis etiketlerinin anlamı şudur: Grafikte bir işlem görürseniz veya grafiğin sağında bir işlem varsa etiketi gösterin. Lütfen durumu değiştirin

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

uygun gördüğünüz gibi.

Sorumluluk reddi: Highcharts kullanmıyorum, bu nedenle bu yanıt sorunu açıklamaya çalışır ve sorunu çözmenin Highcharts yolunu önermemeye çalışır.

Dersler öğrenildi:

• yaxis-plugin.js sorunla alakasız.
• Highstock.js, açık kaynaklı bir kitaplıktır ( highstock.src.js ). Orijinal kaynak kodunda hata ayıkladığınızda herhangi bir hata ayıklama işlemi çok daha kolaydır. Küçültülmüş kod, gereksiz karmaşıklık ve tahmin ekler. Kitaplığı indirdim ve console.log()neler olduğunu öğrenmek için birkaç tane ekledim .