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

Posted

技术标签:

【中文标题】如何使用范围和导航器功能在 Highcharts 中创建柱形范围图?【英文标题】:How to create a column range chart in Highcharts using range and navigator functions? 【发布时间】:2015-03-21 06:08:14 【问题描述】:

我需要在 Highcharts 中绘制 taskrun history。它需要将任务的运行历史显示为水平条。我在下面添加了一些其他要求作为更新。最近我发现StockChart 不支持inverted 选项,并且StockChart 中只有navigator 和rangeSelector 可用。因此我正在使用这些功能。

因此,为了满足要求,我创建了类似于 this jsfiddle example 的内容(在浏览时在某处发现不记得源),并在我以前的 question 的帮助下最终得到了 this plunker link,感谢 @987654327 @

更新问题以避免混淆

附加要求:

仅显示那些在特定日期和时间范围运行的任务。如果运行次数过多,例如超过 10 次,则需要有一种方法可以仅显示 10 个任务,并且 y 轴可滚动以显示其他任务。 plunker link to the problem

上述plunker的问题说明。

如果您从上面的 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
        ;

【问题讨论】:

在悬停状态下设置lineWidth,例如:jsfiddle.net/bx2000cb/8 如您所知,Highcharts error #15 用于对数据进行排序时出错。您正在分配数据,但不是按升序排列。请检查,也许仔细检查一下,因为我看到很多这些问题,因为开发人员无法在他们以某种方式排序的数据中找到问题。 如果你不尝试,你就不会知道.. 我不知道你们在说什么,that plunker 是真的吗?这个问题是一大堆问题。我建议从阅读和理解生成图表的代码开始。另外,我建议阅读一些 Highcharts 教程,以了解它是如何工作的。 我运行这个范围并看到两个任务,没有你描述的额外任务。 【参考方案1】:

所以经过几个小时的挖掘,我刚刚找到了罪魁祸首(或者我真的希望如此)。问题是您对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'
    
  ,

请参阅 demo 的 Plunker。

yAxis 标签的含义是: 如果您在图中看到运行或图形右侧有运行,则显示标签。 请修改条件

if (_xAxis.min <= _int.to) 

如你所愿。

免责声明:我不使用 Highcharts,所以这个答案试图解释问题,而不是建议解决问题的 Highcharts 方式。


经验教训:

yaxis-plugin.js 与问题无关。 Highstock.js 是一个open-source library (highstock.src.js)。如果您调试原始源代码,任何调试都会容易得多。缩小的代码增加了不必要的复杂性和猜测。我已经下载了库并添加了一些 console.log() 以了解发生了什么。

【讨论】:

以上是关于如何使用范围和导航器功能在 Highcharts 中创建柱形范围图?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 x 轴上获取 highcharts 日期?

HighCharts插件学习

Highcharts 复列范围图

Highcharts 标示区曲线图;Highcharts 对数图表;Highcharts 时间间隔图表

Highcharts 日期刻度位置隐藏删除

Highcharts 鼠标跟踪/鼠标悬停功能在 chrome 上很慢,但在 Firefox 或 IE 上并不慢