持续时间为

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

，我认为你应该使用columnrange系列轴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 - 它的类索引（0 =用户1）
• low和high就像是从和时间来
• color只是酒吧的颜色;）