如何使用范围和导航器功能在Highcharts中创建列范围图?


90

我有情节的要求运行历史一个的任务在Highcharts。它需要以水平条显示任务的运行历史记录。我在下面的更新中添加了其他要求。最近我发现,inverted在不支持的选项StockChart,只有导航rangeSelector在StockChart可用。因此,我正在使用这些功能。

因此,为了达到要求,我创建了类似于此jsfiddle示例的内容(在浏览时发现某个地方,不记得源代码了),并在我之前的问题的帮助下,通过Pawel Fus的帮助,得到了这个punker链接

更新问题以避免混淆

其他要求:

显示只有那些任务,其运行在一个特定的日期和时间范围。如果运行太多,例如运行超过10次,则需要有一种方法可以显示只有10个任务,并且y轴可滚动显示其他任务。 问题的链接

上面的问题的问题解释。

如果您从plunker上方查看下面的屏幕截图,则时间范围是从12/12/2014 09:32:2612/12/2014 10:32:26,并且只有2个任务在运行m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OBm_ZIG2_HCP_MERGE_IB_CN。但是我可以看到LILLY_C在此日期时间范围内甚至没有运行过的另一个任务。(在实际数据中,有超过10个任务使该图表混乱,甚至不属于该日期时间范围)

另外,如果您发现最右下角的时间从09:38更改为19:2019:20m_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
        };

6
在状态悬停中设置lineWidth,例如:jsfiddle.net/bx2000cb/8
Sebastian Bochan

5
如您所知,这Highcharts error #15是对数据进行排序时的错误。您正在分配数据,但没有升序。请检查,也许仔细检查,原因是我发现了许多此类问题,因为开发人员无法以某种方式对数据进行排序。
Raein Hashemi 2015年

4
如果您不尝试,就不会知道。
PawełFus 2015年

4
我不知道你们在说什么,家伙真的吗?这个问题是一个大混乱。我建议从阅读和理解生成图表的代码开始。另外,我建议阅读一些Highcharts教程,以了解其工作原理。
帕维尔毕淑敏

1
我在此范围内运行,看到两个任务,您所描述的没有其他内容。
塞巴斯蒂安·博尚

Answers:


6

因此,经过几个小时的挖掘,我才找到了罪魁祸首(或者我真的希望如此)。问题是您对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()以查找正在发生的情况。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.