하이차트에서 범위 및 네비게이터 기능을 사용하여 열 범위 차트를 만드는 방법은 무엇입니까?

하이차트에서 범위 및 네비게이터 기능을 사용하여 열 범위 차트를 만드는 방법은 무엇입니까?

하이차트의 작업 실행 내역을 플롯해야 합니다.태스크 실행 이력을 수평 막대로 표시해야 합니다.아래 업데이트로 추가된 추가 요구사항이 있습니다.최근에 알게 된 건inverted옵션은 StockChart에서 지원되지 않으며 StockChart에서 사용할 수 있는 것은 Navigator와 rangeSelector뿐입니다.그래서 저는 그 기능을 사용하고 있습니다.

그래서 요건을 충족시키기 위해 이 jsfiddle 예시와 비슷한 것을 작성했습니다(출처가 기억나지 않습니다). Pawel Fus 덕분에 이전 질문의 도움을 받아 이 플런커 링크가 완성되었습니다.

혼동을 피하기 위해 질문을 갱신하고 있습니다.

기타 요건:

특정 날짜 및 시간 범위에서 실행된 태스크만 표시합니다.실행 횟수가 10회를 넘는 등 너무 많은 경우 다른 작업을 표시하기 위해 스크롤 가능한 Y축을 사용하여 10개의 작업만 표시할 수 있는 방법이 필요합니다.문제로의 링크 plunker

상기 플런커의 문제 설명.

아래 스크린샷을 위 플런커에서 확인하시면 시간범위는12/12/2014 09:32:26로.12/12/2014 10:32:26실행한 태스크는 2개뿐입니다.m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB&m_ZIG2_HCP_MERGE_IB_CN하지만 그 사이에 다른 작업이 보입니다.LILLY_C이 날짜 범위 내에서 실행하지도 않았습니다.(실제 데이터에는 이 날짜의 시간 범위에도 속하지 않는 10개 이상의 작업이 있습니다.)

또한 맨 아래 오른쪽 모서리 시간이 다음에서 이동했음을 알 수 있습니다.09:38로.19:20.19:20의 마지막 시간이다.m_ZIG2_HCP_MERGE_IB_CN작업.아래는 내 차트 옵션입니다.

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

그래서 몇 시간 동안 파헤친 후에, 나는 방금 범인을 찾아냈다.문제는 다음 항목에 대한 당신의 정의입니다.yAxis라벨 포맷터:

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

다음 조건에 따라 라벨을 표시해야 하는지 여부를 실제로 확인하지 않습니다.task.intervals(을 참조).json.js포메터의 간단한 업데이트(Plunker)가 기능하는 것 같습니다.

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

데모는 Plunker를 참조하십시오.

yAxis 라벨의 의미는 다음과 같습니다.그래프에 런이 표시되거나 그래프 오른쪽에 런이 있는 경우 레이블을 표시합니다.조건을 수정해 주세요.

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

잘 아시겠지만

면책사항:저는 하이차트를 사용하지 않기 때문에 이 답변은 문제를 설명하는 것이지 하이차트 방식의 문제 해결 방법을 제안하는 것이 아닙니다.

---

얻은 교훈:

• yaxis-plugin.js문제와는 무관합니다.
• Highstock.js는 오픈 소스 라이브러리(highstock.src.js)입니다.원래 소스 코드를 디버깅하면 디버깅이 훨씬 쉬워집니다.최소화된 코드는 불필요한 복잡성과 추측을 더합니다.저는 라이브러리를 다운로드하고 몇 가지 추가했습니다.console.log()무슨 일이 일어나고 있는지 알아내기 위해서요

언급URL : https://stackoverflow.com/questions/28088958/how-to-create-a-column-range-chart-in-highcharts-using-range-and-navigator-funct