Question

我需要在周期性事件的图表持续时间上显示。例如，ID为1的用户在上午10:00呼叫ID为2的用户，他们说话时间为5分钟。然后他在下午2点再次给他打电话，他们说的是2分钟。所以这个事件定期发生，我需要在图表上显示为水平条。他们应该看起来像这样：用户1：[5分钟] [2分钟] [...] [...]

我几乎达到了我想要的效果，除了我找不到在X轴上显示时间的方法。 X轴应以30分钟的间隔显示时间。

这是我的配置：

title: null,
chart: {
   type: 'bar',
   backgroundColor: '#F9F9F9',
   plotBackgroundColor: '#F9F9F9',
   borderColor: '#F9F9F9',
   borderWidth: 1,
   animation: 0
},
legend: {
   enabled: false
},  
series: [
   { data: [{ y:1, color: 'red'}          ] },
   { data: [{ y:1, color: 'blue'}         ] },
   { data: [{ y:1, color: 'transparent'}  ] },
   { data: [{ y:1, color: 'red'}          ] },
   { data: [{ y:1, color: 'transparent'}  ] },
   { data: [{ y:1, color: 'red'}          ] },
   { data: [{ y:1, color: 'blue'}         ] },
   { data: [{ y:1, color: 'red'}          ] },
   { data: [{ y:1, color: 'transparent'}  ] },
   { data: [{ y:1, color: 'red'}          ] },
   { data: [{ y:1, color: 'transparent'}  ] },
   { data: [{ y:1, color: 'red'}          ] }
],
xAxis: {
   categories: ['User 1']
},
yAxis: {
   allowDecimals: false,
   min: 0,
   type: '',
   title: {
      text: 'Time'
   },
   stackLabels: {
      enabled: false
   }  
}, 
plotOptions: {
   bar: {
      stacking: 'normal',
      dataLabels: {
      enabled: false
   },
   borderWidth: 0
}

以下是概念演示：http://jsfiddle.net/dimitrykislichenko/SjdR5/

Answer 1

我认为您应该使用带有轴type: 'datetime'的列范围系列。请参阅：http://jsfiddle.net/SjdR5/2/

注意需要更改系列对象：

series: [{
    data: [{
        x: 0,
        low: Date.UTC(2013, 1, 1, 10, 53),
        high: Date.UTC(2013, 1, 1, 10, 59),
        color: 'red'
    },{
        x: 0,
        low: Date.UTC(2013, 1, 1, 12, 12),
        high: Date.UTC(2013, 1, 1, 12, 17),
        color: 'red'
    },{
        x: 0,
        low: Date.UTC(2013, 1, 1, 16, 35),
        high: Date.UTC(2013, 1, 1, 16, 55),
        color: 'red'
    }]
}],

x:0 -it的类别索引（0 =用户1）
low和high就像来回时间
color只是酒吧的颜色;）

持续时间的定期事件

1 个答案: