33 lines
		
	
	
		
			939 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			33 lines
		
	
	
		
			939 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <script type="text/javascript" src="https://syui.ai/bower_components/d3/d3.min.js"></script>
 | |
| <script type="text/javascript" src="https://syui.ai/bower_components/cal-heatmap/cal-heatmap.min.js"></script>
 | |
| <link rel="stylesheet" href="https://syui.ai/bower_components/cal-heatmap/cal-heatmap.css" />
 | |
| <div id="example-b"></div>
 | |
| <script type="text/javascript">
 | |
| 	var currentTime = new Date();
 | |
| 	var year = currentTime.getFullYear()
 | |
| 	var cal = new CalHeatMap();
 | |
| 	cal.init({
 | |
| 		itemSelector: "#example-b",
 | |
| 		domain: "month",
 | |
| 		data: "https://syui.ai/json/cal.json",
 | |
| 		start: new Date(year, 0),
 | |
| 		cellSize: 9,
 | |
| 		range: 13,
 | |
| 		legendColors: ["#fff700", "#817d01"],
 | |
| 		previousSelector: "#example-b-PreviousDomain-selector",
 | |
| 		nextSelector: "#example-b-NextDomain-selector",
 | |
| 		legend: [2, 4, 6, 8],
 | |
| 	});
 | |
| </script>
 | |
| 
 | |
| <style>
 | |
| div#example-b{
 | |
| 	background: #f1f1f1;
 | |
| 	margin-right: auto;
 | |
| 	margin-left: auto;
 | |
| }
 | |
| .cal-heatmap-container {
 | |
| 	width: 100%;
 | |
| }
 | |
| </style>
 |