持續時間爲

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只是酒吧的顏色;）