2013-10-07 100 views
0

我需要以下圖表的幫助,是與multaxes multiseries,我需要一些酒吧堆疊和其他沒有。我粘貼代碼,這裏是一個演示http://jsfiddle.net/Willem/aAb3E/17/多軸flot圖與有序堆積酒吧,而不是堆積任何調整酒吧位置

這是我的第一軸數據(線未堆疊):

var data1 = [ 
[1375302600000, 33], 
[1375300800000, 26] 
]; 
var data2 = [ 
[1375302600000, 0], 
[1375300800000, 12] 
]; 

這些都是酒吧(用戶和日期(第一個值)堆疊):

var user1_estado1 = [ 
[1375302600000, 20], 
[1375300800000, 40] 
]; 
var user1_estado2 = [ 
[1375302600000, 10], 
[1375300800000, 90] 
]; 
var user1_estado3 = [ 
[1375302600000, 30], 
[1375300800000, 70] 
]; 

var user2_estado1 = [ 
[1375302600000, 20], 
[1375300800000, 40] 
]; 
var user2_estado2 = [ 
[1375302600000, 10], 
[1375300800000, 90] 
]; 
var user2_estado3 = [ 
[1375302600000, 30], 
[1375300800000, 70] 
]; 

我按系列設置了數據集選項; data1和data2沒有條和堆棧錯誤;其他酒吧顯示:真和訂單設置,因爲我希望他們按用戶和日期時間solape。

var dataset = [{ 
    label: "Answer", 
    data: data1, 
    bars: { 
     show: false 
    }, 
    stack: false, 
    xaxis: 2 
}, { 
    label: "Not answer", 
    data: data2, 
    bars: { 
     show: false 
    }, 
    stack: false, 
    xaxis: 2 
}, { 
    label: "User1_estado1", 
    data: user1_estado1, 
    bars: { 
     show: true, 
     order:1 
    }, 
    xaxis: 1, 
    yaxis: 2, 
}, { 
    label: "User1_estado2", 
    data: user1_estado2, 
    bars: { 
     show: true, 
     order:1 
    }, 
    xaxis: 1, 
    yaxis: 2, 
}, { 
    label: "User1_estado3", 
    data: user1_estado3, 
    bars: { 
     show: true, 
     order:1 
    }, 
    xaxis: 1, 
    yaxis: 2, 
}, { 
    label: "User2_estado1", 
    data: user2_estado1, 
    bars: { 
     show: true, 
     order:2 
    }, 
    xaxis: 1, 
    yaxis: 2, 
}, { 
    label: "User2_estado2", 
    data: user2_estado2, 
    bars: { 
     show: true, 
     order:2 
    }, 
    xaxis: 1, 
    yaxis: 2, 
}, { 
    label: "User2_estado3", 
    data: user2_estado3, 
    bars: { 
     show: true, 
     order:2 
    }, 
    xaxis: 1, 
    yaxis: 2, 
}]; 

繪製出來,設置barwith(每半年一次)這個我不知道如何調整:(和diferent軸,由現在時間xaxes,但我需要的xaxe1顯示每個用戶。

var plot = $.plot(
$("#placeholder"), dataset, { 
series: { 
    bars: { 
     barWidth: 60*30*1000, 
     align: "center", 
     fill: true, 
    }, 
    //pointLabels:{show:true, stackedValue: true}, 
}, 
grid: { 
    hoverable: true, 
    clickable: true, 
    tickColor: "#f9f9f9", 
    borderWidth: 2, 
    mouseActiveRadius: 10 
}, 
xaxes: [{ 
    show: true, 
    mode: "time", 
    timeformat: "%H:%M", 
    tickSize: [0.5, "hour"], 
    axisLabel: "Usuario", 
    axisLabelFontSizePixels: 3, 
    axisLabelPadding: 5 
}, { 
    show: true, 
    mode: "time", 
    timeformat: "%H:%M", 
    tickSize: [0.5, "hour"], 
    axisLabel: "Usuarios ocupados", 
    axisLabelFontSizePixels: 3, 
    axisLabelPadding: 5 
}], 
yaxes: { 
    color: "black", 
    axisLabel: "Usuarios ocupados", 
    axisLabelUseCanvas: true, 
    axisLabelFontSizePixels: 8, 
    axisLabelFontFamily: 'Verdana, Arial', 
    axisLabelPadding: 5, 
    tickDecimals: 0 
} 
}); 

我在這裏補充一些互動,以呈現出一些提示圖。

var previousPoint = null, 
previousLabel = null; 
$("#placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) { 
     previousPoint = item.dataIndex; 
     previousLabel = item.series.label; 
     $("#tooltip").remove(); 

     var x = new Date(item.datapoint[0]); 
     var y = item.datapoint[1]; 
     var color = item.series.color; 

     showTooltip(item.pageX, item.pageY, color, 
      "<strong>" + item.series.label + "</strong><br>" + (x.getMonth() + 1) + "/"  + x.getDate() + 
      " : <strong>" + y + "</strong> llamadas"); 
    } 
} else { 
    $("#tooltip").remove(); 
    previousPoint = null; 
} 
}); 

function showTooltip(x, y, color, contents) { 
$('<div id="tooltip">' + contents + '</div>').css({ 
    position: 'absolute', 
    display: 'none', 
    top: y - 40, 
    left: x - 30, 
    border: '2px solid ' + color, 
    padding: '3px', 
     'font-size': '9px', 
     'border-radius': '5px', 
     'background-color': '#fff', 
     'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
    opacity: 0.9 
}).appendTo("body").fadeIn(200); 
} 

我的問題是使每個用戶和時間(更好的堆疊)的酒吧,並不能疊加的兩行。我還喜歡在a中展示xis1是用戶的時鐘(而不是時間)。

你可以在這裏看到它http://jsfiddle.net/Willem/aAb3E/17/

請需要用於驅動這個:)一些幫助。

非常感謝!

回答

0

爲了防止線從堆放,擺脫,你不真的有些選項需要:

var dataset = [{ 
    label: "Answer", 
    data: data1, 
    xaxis: 2 
}, { 
    label: "Not answer", 
    data: data2, 
    xaxis: 2 
}, ... 

說實話,我不完全知道爲什麼「假」,使他們堆棧;這看起來像一個錯誤,但在任何情況下,只是刪除選項解決了這個問題,因爲默認不堆棧。

我不清楚你的意思是「對齊每個用戶和時間的酒吧」;你可以解釋嗎?

+0

謝謝,我真的會覆蓋選項,首先在系列中,然後在選項中。我已經清理了代碼。 但我不能用同一時間線解決一個問題。我將扔掉這個想法並製作兩個不同的圖表。 – Willem

相關問題