6
我想通過highcharts複製github上呈現的「打卡」樣式圖。使用Highcharts.js創建打卡風格圖
我真的與這一個掙扎，這裏有一個jsfiddle啓動讓我在那裏。我寧願在X和Y上有幾天的時間，但我對如何去做這件事感到茫然。
任何幫助表示讚賞。
TIA！
A
回答
8
我無法翻轉軸，但爲您整理了很多東西。
HTML：
<div id="container" style="height: 400px"></div>
JS：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'scatter'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}]
}]
});
+0
超級關閉 - 非常感謝。如果我能弄清楚如何在y軸上顯示00:00到24:00的時間，那麼這將是一個勝利者。我更新了小提琴以在x軸上顯示Sun-Sat。感謝讓我更接近。 – 2012-02-14 15:40:36
+3
我很高興我有幫助，雖然投票會非常令人鼓舞：P **開玩笑**。會試圖尋求進一步改善。 – 2012-02-14 18:10:42
2
我從@mangobug updated the jsFiddle引導你做你想要
+0
'未捕獲的ReferenceError：沒有定義Highcharts' – 2017-07-07 14:53:00
4
什麼的更緊密的方式，我想這是到現在爲止，但也許這種解決方案將幫助其他人在相同的情況。
這裏是我的解決方案：
$(function() {
$('#container').highcharts({
chart: {
defaultSeriesType: 'scatter'
},
title: {
text: 'Punchcard'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
hour: '%I %P'
},
tickInterval: 3600000 * 1
},
yAxis: {
categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
},
series: [{
data: [
{y: 0, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
]
}]
});
});
這裏是演示：http://jsfiddle.net/KmPJE/1/
讓我知道這是否爲你的作品。
+0
真的不錯的工作 - 在舊帖子上很好的跟進。 – 2013-07-02 02:59:39
+0
沒問題！我目前正在使用氣泡圖而不是散點圖來更好地進行研究。 – kerberoS 2013-07-02 04:10:04
相關問題
- 1. 創建使用扇形圖Highcharts.js
- 2. 用JasperReports創建Excel風格
- 3. 使用Rails3創建Twitter風格路線
- 4. 創建推特風格圖標
- 5. 用highcharts.js構建自定義直方圖
- 6. 創建一個熱圖/打卡使用Chart.js
- 7. 創建類的STL風格
- 8. 如何使用Rubymotion在UITableView中創建Facebook Feed風格的卡片？
- 9. 創建菜單CNN iOS應用風格
- 10. 使用AMD風格創建dojo增強網格
- 11. 使用意圖打開創建消息
- 12. 在xy風格創建直方圖數據的loglog圖-python，matplotlib，
- 13. 使用風格
- 14. 使用數組作爲Highcharts.js
- 15. 使用highcharts.js的儀表板
- 16. 使用圖像創建表格CodeIgniter
- 17. 使用表格創建圖表
- 18. CSS手風琴風格圖像查看器 - 使第一張圖像打開
- 19. 創建/ SD卡/圖片
- 20. 斯卡拉地圖創建
- 21. 使用JPanel/JFrame創建財富風格拼圖板的輪轂Java
- 22. 如何使用.Net創建Facebook風格的縮略圖選擇器
- 23. 使用AJAX創建一個Gmail風格的明星最愛圖標
- 24. 使用jQuery mobile創建帶有手風琴風格的列表項的列表
- 25. 使用Spring引導創建REST風格的Web服務
- 26. 使用.htaccess創建Google風格的網址
- 27. 如何使用鈦創建客戶風格進度欄？
- 28. 使用JavaScript來創建漫畫風格/手抖動
- 29. WPF - 創建使用資源風格的觸發器
- 30. 使用php創建水色風格按鈕
更新了jsfiddle，並修改了mangobug的建議。剩下的就是在y軸上花時間。 – 2012-02-14 15:41:23
這是另一個更新，它可以獲得y和x軸標籤的所需：http://jsfiddle.net/CA2cT/8/ – Mark 2012-02-14 22:33:13
完美的完成！感謝你拖過那條線。 – 2012-02-15 15:21:45