Last active
January 7, 2024 17:00
-
-
Save skysan87/4c5763c9d3e76042c4c06c191980b310 to your computer and use it in GitHub Desktop.
Cal-Heatmapのサンプル
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script> | |
| <script src="https://unpkg.com/cal-heatmap/dist/plugins/Legend.min.js"></script> | |
| <script src="https://unpkg.com/@popperjs/core@2"></script> | |
| <script src="https://unpkg.com/cal-heatmap/dist/plugins/Tooltip.min.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css"> | |
| <title>Cal-Heatmap Sample</title> | |
| </head> | |
| <body> | |
| <div id="cal-heatmap"></div> | |
| <div id="ex-year-legend"></div> | |
| </body> | |
| <script type="module"> | |
| const cal = new CalHeatmap() | |
| const data = [ | |
| { date: '2023-07-31', value: 1 }, | |
| { date: '2023-08-01', value: 2 }, | |
| { date: '2023-08-02', value: 3 }, | |
| { date: '2023-08-03', value: 4 }, | |
| { date: '2023-10-02', value: 6 }, | |
| ] | |
| const weekdays = ['日', '月', '火', '水', '木', '金', '土'] | |
| cal.paint( | |
| { | |
| itemSelector: '#cal-heatmap', | |
| domain: { | |
| type: 'month', | |
| gutter: 5, | |
| label: { | |
| text: 'M月', | |
| textAlign: 'start', | |
| position: 'top' | |
| } | |
| }, | |
| subDomain: { | |
| type: 'ghDay', // 月単位の塊ではなく、等間隔に並べる | |
| // type: 'day', // 月単位の塊で表示 | |
| gutter: 3, | |
| width: 17, | |
| height: 17, | |
| // label: 'D' // debug | |
| }, | |
| date: { | |
| start: new Date('2023-01-01') | |
| }, | |
| data: { | |
| source: data, | |
| x: 'date', | |
| y: 'value' | |
| }, | |
| scale: { | |
| // 重みづけ | |
| color: { | |
| type: 'threshold', | |
| range: ['#b0f5e5', '#35f2c6', '#0fbdb4', '#077485'], | |
| domain: [4, 6, 8] | |
| } | |
| } | |
| }, | |
| [ | |
| [ | |
| Tooltip, | |
| { | |
| text: function (date, value, dayjsDate) { | |
| return (value ? `${value}回 on ` : '') + dayjsDate.format('M月D日') + `(${weekdays[dayjsDate.day()]})` | |
| } | |
| } | |
| ], | |
| [ | |
| Legend, | |
| { | |
| tickSize: 2, // メモリの線を下へ伸ばす | |
| width: 150, | |
| itemSelector: '#ex-year-legend', | |
| label: '回数' | |
| } | |
| ] | |
| ] | |
| ) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
公式: https://cal-heatmap.com/