web-dev-qa-db-ja.com

範囲関数とナビゲーター関数を使用してHighchartsで列範囲グラフを作成する方法

Highchartsでタスクの実行履歴をプロットする必要があります。タスクの実行履歴を水平バーとして表示する必要があります。以下にアップデートとして追加した追加の要件があります。最近、invertedオプションが StockChart ではサポートされておらず、 navigator ＆ rangeSelector のみがStockChartで使用できることがわかりました。したがって、これらの関数を使用しています。

要件を達成するために、私は このjsfiddleの例 （ブラウジング中にどこかで見つかるソースを覚えていない）に似たものを作成し、 this plunker link で終わりました以前の question のおかげで Pawel Fus のおかげで

混乱を避けるために質問を更新しています

追加要件：

表示これらのタスクのみ which ran特定のdate and time range。実行が10回を超えるなど、実行回数が多すぎる場合は、他のタスクを表示するためにスクロール可能なy軸を使用して、10個のタスクのみを視覚的に表示する方法が必要です。 問題へのプランカーリンク

上記のプランカーの問題の説明。

上記のプランカーから以下のスクリーンショットを確認すると、時間範囲は12/12/2014 09:32:26から12/12/2014 10:32:26であり、実行されたタスクはm_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB＆m_ZIG2_HCP_MERGE_IB_CNの2つだけです。ただし、LILLY_Cの間に、この日付範囲で実行されなかった別のタスクが表示されます。 （実際のデータでは、この日付範囲に該当しないこのグラフを乱雑にする10を超えるタスクがあります）

また、右下隅で時間が09:38から19:20にシフトしたことに気づいた場合。 19:20はm_ZIG2_HCP_MERGE_IB_CNタスクの終了時間です。 enter image description here 以下は私のチャートオプションです

    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
        };
javascriptangularjshighchartshighstock
90
AabinGunz

だから、数時間掘り下げた後、私は犯人を見つけたばかりです（または私は本当にそう願っています）。問題は、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) {
_

あなたが合うと思うように。

免責事項：私はHighchartsを使用していないので、この回答は問題を説明するものであり、Highchartsによる問題解決の方法を提案するものではありません。

学んだ教訓：

  • _yaxis-plugin.js_は問題とは無関係です。
  • Highstock.jsは オープンソースライブラリ （ highstock.src.js ）です。元のソースコードをデバッグすると、デバッグがはるかに簡単になります。コードを縮小すると、不必要な複雑さと推測が追加されます。ライブラリをダウンロードし、何が行われているのかを確認するためにconsole.log()を追加しました。
6
Martin Vseticka