श्रेणी और नेविगेटर फ़ंक्शन का उपयोग करके Highcharts में एक कॉलम रेंज चार्ट कैसे बनाएं?

Question 1

मुझे एक कार्य के इतिहास को हाईचर्स में चलाने की आवश्यकता है । यह दिखाने की जरूरत है कि कार्यों का इतिहास एक क्षैतिज पट्टी के रूप में चलता है। अतिरिक्त आवश्यकताएं हैं जिन्हें मैंने नीचे अद्यतन के रूप में जोड़ा है। हाल ही में मुझे पता चला कि विकल्प में समर्थित नहीं है StockChart और है कि केवल नाविक और rangeSelector StockChart में उपलब्ध हैं। इसलिए मैं उन कार्यों का उपयोग कर रहा हूं।inverted

तो आवश्यकता को प्राप्त करने के लिए मैंने इस jsfiddle उदाहरण के समान कुछ बनाया (ब्राउजिंग के दौरान स्रोत को याद न करते हुए कहीं न कहीं पाया गया) और अपने पिछले प्रश्न की मदद से इस प्लंकर लिंक के साथ समाप्त हुआ , धन्यवाद Pawel Fus

भ्रम से बचने के लिए सवाल अपडेट करना

अतिरिक्त आवश्यकताएं:

केवल उन कार्यों को दिखाएं जो किसी विशेष तिथि और समय सीमा में चले । यदि बहुत अधिक रन हैं, जैसे कि 10 से अधिक रन, तो वाई-अक्ष के साथ केवल 10 कार्यों को प्रदर्शित करने का एक तरीका है जो अन्य कार्यों को दिखाने के लिए स्क्रॉल करने योग्य है। समस्या के लिए प्लंकर लिंक

उपरोक्त प्लंकर की समस्या की व्याख्या।

यदि आप ऊपर दिए गए प्लंकर से नीचे दिए गए स्क्रीनशॉट की जांच करते हैं, तो समय सीमा से 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
        };

Question 2

इसलिए खोदने के कुछ घंटों के बाद, मुझे अभी दोषी का पता चला है (या मुझे वास्तव में ऐसी उम्मीद है)। समस्या 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) के अनुसार प्रदर्शित करना चाहिए या नहीं । कार्यपत्रक का एक सरल अद्यतन ( प्लंकर ) काम करने लगता है:

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

डेमो के लिए प्लंकर देखें ।

YAxis लेबल का अर्थ है: यदि आप ग्राफ़ में कोई रन देखते हैं या यदि ग्राफ़ के दाईं ओर कोई रन है, तो लेबल दिखाएं। कृपया स्थिति को संशोधित करें

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

जैसे आप स्वस्थ दिख रहे हैं।

अस्वीकरण: मैं Highcharts का उपयोग नहीं करता हूं, इसलिए यह उत्तर समस्या को समझाने की कोशिश करता है और समस्या को हल करने के Highcharts-way का सुझाव नहीं देता है।

सीख सीखी:

yaxis-plugin.js समस्या के लिए अप्रासंगिक है।
Highstock.js एक ओपन-सोर्स लाइब्रेरी ( highstock.src.js ) है। यदि आप मूल स्रोत कोड डीबग करते हैं तो कोई भी डीबगिंग बहुत आसान है। न्यूनतम कोड अनावश्यक जटिलता और अनुमान जोड़ता है। मैंने लाइब्रेरी डाउनलोड की है और कुछ console.log()को जोड़ा है ताकि पता चल सके कि क्या चल रहा है।