[Javascript] ¿Cómo crear un gráfico de rango de columnas en Highcharts utilizando las funciones de rango y navegador?



Answers

Question

Tengo un requisito para trazar el historial de ejecución de una tarea en Highcharts. Debe mostrar que ejecuta el historial de las tareas como una barra horizontal. Hay requisitos adicionales que agregué como actualización a continuación. Recientemente descubrí que la opción inverted no es compatible con StockChart y que solo el navigator y rangeSelector están disponibles en StockChart. Por lo tanto, estoy usando esas funciones.

Entonces, para lograr el requisito, creé algo similar a este ejemplo jsfiddle (encontrado en algún lugar mientras navegaba, no recuerdo la fuente) y terminé con este enlace plunker con la ayuda de mi question anterior, gracias a Pawel Fus.

Actualización de la pregunta para evitar confusiones

Requerimientos adicionales:

Mostrar solo aquellas tareas que se ejecutaron en un rango de fecha y hora en particular. En caso de que haya demasiadas ejecuciones, como más de 10 ejecuciones, entonces debe haber una manera de mostrar solo 10 tareas visiblemente con un eje y que se pueda desplazar para mostrar otras tareas. enlace de plunker al problema

Explicación del problema del plunker anterior.

Si marca la captura de pantalla siguiente desde arriba, el intervalo de tiempo va del 12/12/2014 09:32:26 al 12/12/2014 10:32:26 y solo hay 2 tareas que se han ejecutado m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB & m_ZIG2_HCP_MERGE_IB_CN . Sin embargo, puedo ver otra tarea entre LILLY_C que ni siquiera se ejecutó en este rango de fechas. (En datos reales hay más de 10 tareas que saturan este gráfico que ni siquiera está dentro de este rango de tiempo)

Además, si observa que en la esquina inferior derecha, el tiempo cambió de 09:38 a 19:20 . 19:20 es la hora de m_ZIG2_HCP_MERGE_IB_CN tarea m_ZIG2_HCP_MERGE_IB_CN . A continuación están mis opciones de gráfico

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





Links