jquery flot條形圖多個系列
[英]jquery flot bar chart multiple series
問題描述
為了使事情變得容易，我正在提供代碼： http ： //jsbin.com/otaruq
我們這里有一個這樣的數據集:(查看源代碼更多）
"label": "scott",
"data": [[1317427200000, "17017"], [1317513600000, "77260"]]
其中第一個值是UTC格式的日期，第二個值應該是分數。
現在，我要做的是讓y軸上的每個日期並排表示得分的條形，如下所示：
3 | # #
2 | # # # # # #
1 | # # # # # # # # #
0 |_________________________________
1 oct 2 oct 3 oct
相反，現在你可以看到這些酒吧都是在每一個上面。
任何幫助都會真正得到應用，謝謝
1 個解決方案
解決方案1
14 已采納 2011-10-09 14:24:25
最簡單的方法是手動抖動x值。 我發現50,000毫秒是一個很好的條形寬度抖動。
它產生以下內容：
完整代碼：
var data = [{ "label": "scott", "data": [[1317427200000-5000000*3, "17017"], [1317513600000-5000000*5, "77260"]] }, { "label": "martin", "data": [[1317427200000-5000000*2, "96113"], [1317513600000-5000000*4, "33407"]] }, { "label": "solonio", "data": [[1317427200000-5000000, "13041"], [1317513600000-5000000*3, "82943"]] }, { "label": "swarowsky", "data": [[1317427200000, "83479"], [1317513600000-5000000*2, "96357"], [1317600000000-5000000, "55431"]] }, { "label": "elvis", "data": [[1317427200000+5000000, "40114"], [1317513600000-5000000*1, "47065"]] }, { "label": "alan", "data": [[1317427200000+5000000*2, "82504"], [1317513600000, "46577"]] }, { "label": "tony", "data": [[1317513600000+5000000, "88967"]] }, { "label": "bill", "data": [[1317513600000+5000000*2, "60187"], [1317600000000, "39090"]] }, { "label": "tim", "data": [[1317513600000+5000000*3, "95382"], [1317600000000+5000000, "89699"]] }, { "label": "britney", "data": [[1317513600000+5000000*4, "76772"]] }, { "label": "logan", "data": [[1317513600000+5000000*5, "88674"]] }]; var options = { series: { bars: { show: true, barWidth: 60 * 60 * 1000, align: 'center' }, }, yaxes: { min: 0 }, xaxis: { mode: 'time', timeformat: "%b %d", minTickSize: [1, "month"], tickSize: [1, "day"], autoscaleMargin: .10 } }; $(function() { $.plot($('#placeholder'), data, options); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> </head> <body> <div id="placeholder" style="width:800px;height:400px;"></div> </body> </html>
浮選條形圖多個系列的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.